<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. solaris 软件包地址

      1. http://www.opencsw.org/ 在Solaris 10下 1.安装pkgutil pkgadd -d http://get.opencsw.org/now 2.查询有那些PK ...

  2. 液晶电视插有线电视信号线的是哪个接口 HDMI是什么接口

    1.液晶电视插有线电视信号线的接口(模拟信号)是射频接口(也叫RF接口,同轴电缆接口,闭路线接口),数字信号就得通过机顶盒转换成模拟信号视频输出至电视,才能正常收看电视节目. 2.电视机或高清机顶盒上 ...

  3. delphi 处理缩放图像

    procedure TTMEImageDeviceIdentifyFrom.DrawText(AImage : TImage; AFile: string);var I: Integer; iWidt ...

  4. delphi Image处理

    procedure ImageDrawText(ATextEdo: IGGCCADTextEDO); var oImageBitmap: TBitmap; x1,x2,y1,y2: double; b ...

  5. 清华梦的粉碎—写给清华大学的退学申请(转自王垠Blog)

    清华梦的诞生 小时候,妈妈给我一个梦.她指着一个大哥哥的照片对我说,这是爸爸的学生,他考上了清华大学,他是我们中学的骄傲.长大后,你也要进入清华大学读书,为我们家争光.我不知道清华是什么样子,但是我知 ...

  6. Android手机提示“未安装应用程序”

    用eclipse调试应用时,遇到了这个问题,网上给出的解决方案倒是挺多,但似乎一个都没奏效,而且我手机也重启了,还是有问题,郁闷ing-   然后看到一篇文章指出,可能不是签名和SD的卡问题,而是我们 ...

  7. libgdx 环境搭建

    1:环境搭建: (1)首先进入官网,http://libgdx.badlogicgames.com/download.html  点击下方的Releases.进行下载最新的版本号就可以. 这个为我们开 ...

  8. [Web 前端] SuperAgent中文使用文档

    cp from : https://blog.csdn.net/gebitan505/article/details/58585846 superagent是nodejs里一个非常方便的客户端请求代理 ...

  9. jQuery的attr方法处理checkbox的问题

    现象 使用了 jQuery 1.10 的版本,想实现 checkbox 的全部选中和全部取消选中,使用了 attr 的方法,如下: $(elem).attr("checked") ...

  10. 不知道哪里alert undefined 用下面的语句是js报错.F12能提示报错的地方window.alert=function(aa){ if (typeof (aa)"undefined"){ throw "就是这";}};

    不知道哪里alert undefined 用下面的语句是js报错.F12能提示报错的地方 var oldalert=window.alert; window.alert=function(aa){ i ...