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

 

在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

 

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：

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

这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了

web页面自适应手机屏幕宽度的更多相关文章

  1. 移动端H5页面自适应手机屏幕宽度

    1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...

  2. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  3. HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  4. 》》HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  5. WAP网站WML或HTML页面自适应手机屏幕实现方法

     把图片和div的宽度都设置成:width:100%就可以了

  6. flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度

    问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...

  7. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  8. 获取Android 手机屏幕宽度和高度以及获取Android手机序列号

    1.获取Android 手机屏幕宽度 1 DisplayMetrics dm = new DisplayMetrics(); 2 this.getWindowManager().getDefaultD ...

  9. 使PC端网页宽度自适应手机屏幕大小

    有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...

随机推荐

  1. c语言 函数传输传递的三种方式(值、指针、引用)

    本文摘自<彻底搞定c指针> 一.三道考题开讲之前,我先请你做三道题目.(嘿嘿,得先把你的头脑搞昏才行……唉呀,谁扔我鸡蛋?)考题一,程序代码如下:void Exchg1(int x, in ...

  2. [bug]The file ‘/xxx/xxx.aspx’ has not been pre-compiled, and cannot be requested

    今天莫名奇妙的出现了这个问题,查找很多资料最后解决了. 发现编译的时候,少了一个dll,导致预编译失败. 参考资料 https://blogs.msdn.microsoft.com/asiatech/ ...

  3. SqlDataReader执行带输出参数存储过程 错误分析

    在上一篇随笔:SqlDataReader读取分页数据,pageCount你是肿么了? 遇到了很让人头疼的问题:SqlDataReader执行带输出参数的存储过程总是获取不到输出参数的正确值.这里将解决 ...

  4. 怎样把excel一列分成多列

    1,选定要分列的列. 2,点击“数据”-“分列”. 3,在选项栏中设置如图 4,选择分隔符 4,看,分开了吧!

  5. centOS6.4 extundelete工具恢复rm -rf 删除的目录

    PS:补充下,我在fedora 19上运行的时候遇到的一个问题: [root@localhost extundelete-]# ./configure Configuring extundelete ...

  6. (ヒトコト)一个挺有趣的东西！作为一个动漫宅，游戏宅来说还是一个挺有趣的接口！banner上面就是

    Hitokoto API 更新:2014.02.22 问题/反馈:api # hitokoto.us 数据获取:[ 数据获取 ] 调用举例:[ JavaScript + HTML (同步) ] [ J ...

  7. 【福利将至】iPhone用户可用Siri发微信了

    北京时间6月14日,苹果WWDC16开发者大会召开.继2015年3月份春季发布会和9月份的秋季新品发布会,苹果和腾讯联手Apple Watch版微信和微信3DTouch功能之后,双方在今年的WWDC上 ...

  8. 关闭火车头dedecms发布模块自动关键词,解决火车头发布dedecms文章关键词过多问题

    用火车头发布dedecms文章时,经常会自动添加关键词,这些关键词默认有10个,数量过多,而且是随机提取的,乱七八糟的词都进去了,如下图所示: 这些关键词可能会成为se判断你作弊的依据,现在se也弱化 ...

  9. editplus快捷键大全之editplus搜索快捷键

    前面我们说了editplus快捷键大全之editplus文件快捷键和editplus快捷键大全之editplus光标快捷键,editplus快捷键大全之editplus编辑快捷键这里我们讲一下edit ...

  10. Zookeeper Invalid config, exiting abnormally

    Zookeeper Invalid config, exiting abnormally     出现 Invalid config, exiting abnormally 的情况可能有3个: 是否开 ...