<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

wap手机页面自动适应手机屏幕宽度

 大 | 中 | 小  2012/08/25 17:51 , mdy 
Css 重构 , 评论(0) , 阅读(5969) , Via 本站原创 
Tags: wap页面自适应宽度 , 手机页面宽度 , wap
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
  1. 在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。
  2. 其中：
  3. width=device-width ：表示宽度是设备屏幕的宽度
  4. initial-scale=1.0：表示初始的缩放比例
  5. minimum-scale=0.5：表示最小的缩放比例
  6. maximum-scale=2.0：表示最大的缩放比例
  7. user-scalable=yes：表示用户是否可以调整缩放比例
  8. 如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：
  9. [html] view plaincopy
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  11. 这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了
  1. html5开发的wap网站这三个分别代表什么含义？
  2. <meta name="MobileOptimized" content="240"/> //浏览器不会自动调整文件的大小,不会随着浏览器拉伸缩放。
  3. <meta name="apple-touch-fullscreen" content="YES" />"添加到主屏幕“后，全屏显示
  4. <meta name="apple-mobile-web-app-capable" content="yes" />
  5. 如果内容设置为YES，Web应用程序运行在全屏模式;否则，它不会。默认行为是使用Safari浏览器显示网页内容

手机wap适配的更多相关文章

  1. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  2. 老李分享：android手机测试之适配（1）

    Android的屏幕适配一直以来都在折磨着我们这些开发者,本篇文章以Google的官方文档为基础,全面而深入的讲解了Android屏幕适配的原因.重要概念.解决方案及最佳实践,我相信如果你能认真的学习 ...

  3. 手机wap网站建设的方法和技巧

    随着互联网技术的不断进步,越来越多的运营商对于手机wap网站的建设有了更多的投入,手机wap网站的建设和开发要根据网站的特点和经营范围来进行设计和建设,这样才可以提升手机wap网站建设的效果.现在智能 ...

  4. 微信跳转，手机WAP浏览器一键超级跳转微信指定页面

    微信跳转,手机WAP浏览器一键超级跳转微信指定页面 这篇文章主要介绍了如何在手机浏览器wap网页中点击链接跳转到微信界面,需要的朋友可以参考下 先说第一种,最简单的唤起微信协议,weixin://主流 ...

  5. 了解真实的rem手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  6. selenium+python自动化84-chrome手机wap模式（登录淘宝页面）

    前言 chrome手机wap模式登录淘宝页面,点击验证码无效问题解决. 切换到wap模式,使用TouchActions模块用tap方法触摸 我的环境 chrome 62 chromedriver 2. ...

  7. 【Android】Android中不同手机分辨率适配问题

    在项目开发的过程中,同一个布局对应不同的手机会显示出不同的效果.导致这个现象产生的原因是不同手机的分辨率不同.在android sdk提供的帮助文档中,我们可以看到各种手机的分辨率和对应的屏大小.QV ...

  8. 真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  9. php获得访问来源（手机wap访问、电脑web访问）

    为了更好的用户体验,本主题默认支持wap和web两种访问样式,wap访问将不包含任何脚本.样式也是重新撰写,不支持更多页面,只支持首页.详情页, 评论框.登录等内容将陆续更新到wap内容里.如果想测试 ...

随机推荐

  1. JavaScript进阶系列02,函数作为参数以及在数组中的应用

    有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var su ...

  2. 委托、Lambda表达式、事件系列06,使用Action实现观察者模式，体验委托和事件的区别

    在"实现观察者模式(Observer Pattern)的2种方式"中,曾经通过接口的方式.委托与事件的方式实现过观察者模式.本篇体验使用Action实现此模式,并从中体验委托与事件 ...

  3. Eclipse 进入代码定位文件位置

  4. h.264 x.264

    这是两个不同类型的东西. x264是视频编码器,H.264是视频编码格式. x264编出来的东西就是h.264的.举个例子来说,x264就好比画图或者photoshop,h.264就好比jpg,bmp ...

  5. 浅析c++中virtual关键字

    http://blog.csdn.net/djh512/article/details/8973606 1.virtual关键字主要是什么作用? c++中的函数调用默认不适用动态绑定.要触发动态绑定, ...

  6. SharePoint PowerShell 修改计时器任务

    前言 最近碰到需要修改计时器任务的需求,然后搜了搜,发现有powershell命令可以搞定,记录一下. $timerJob = Get-SPTimerJob -Identity "DocID ...

  7. mysql 的indexof函数

    LOCATE(substr,str) 返回子串substr在字符串str第一个出现的位置,如果substr不是在str里面,返回0. mysql> select LOCATE('bar', 'f ...

  8. [Web 前端] 你不知道的 React Router 4

    cp from https://segmentfault.com/a/1190000010718620 几个月前,React Router 4 发布,我能清晰地感觉到来自 Twitter 大家对新版本 ...

  9. CATEGORICAL, ORDINAL AND INTERVAL VARIABLES

    WHAT IS THE DIFFERENCE BETWEEN CATEGORICAL, ORDINAL AND INTERVAL VARIABLES? In talking about variabl ...

  10. 使用ASP.NET AJAX与Bootstrap 弹窗解决方案

    我在做采购系统时,因为使用了ASP.NET AJAX的UpdatePanel的控件,可以使得页面局部刷新显示.但是使用起来问题还是很多. 下面列出了一种情况,花了将近5个小时才算解决,虽然不是很完美, ...