<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. 禁止掉非法IP登陆服务器

    今天查看线上服务器日志/var/log/secure发现有很多国外的ip尝试登陆服务器,以前一直没太注意这方面,作为系统管理员真是失职啊,虽然服务器已经设置了强密码,但是看到有人想搞你还是很不爽的.一 ...

  2. Caused by: java.lang.NoSuchFieldError: TRACE

    Caused by: java.lang.NoSuchFieldError: TRACE at org.slf4j.impl.Log4jLoggerAdapter.trace(Log4jLoggerA ...

  3. [实战]MVC5+EF6+MySql企业网盘实战(27)——应用列表

    写在前面 本篇文章将实现应用列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘 ...

  4. [整理]Code::Blocks使用遇到的问题

    在使用其编写C小程序的过程总会遇到些问题,特整理如下: 1.无法调试 注意的是项目所在的文件路径不能包含中文. 2.头文件接口函数申明引用无效 查看头文件是否处于可编译状态,左侧项目文件列表里是文件名 ...

  5. apue第六章学习总结

    apue第六章学习总结 1.关于阴影文件与口令 在口令文件当中,常见的字段有(以root为例): root(用户名):x(加密口令):0(uid):0(gid):root(注释字段):/root(用户 ...

  6. PHP访问，增删改查，小结

    PHP访问数据,增,删,改,查 增: 1,add.php 显示页面,利用 <form> 表单添加数据,数据添加到 name 中. 2,addchuli.php 处理页面,定义变量接受 $_ ...

  7. Bookshelf 2

    Bookshelf 2 Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit  ...

  8. Spring AOP使用整理：各种通知类型的介绍

    2.PersonImpl类的源码 public class PersonImpl implements Person { private String name; private int age; p ...

  9. Android5.0版本之后切换听筒模式

    5.0以前Android听筒模式和扬声器模式这样就管用 扬声器://关闭麦克风  mAudioManager.setMicrophoneMute(false);  // 打开扬声器  mAudioMa ...

  10. puppet 安装

    yum源配置 1. wget http://ftp.kaist.ac.kr/fedora//epel/6/i386/epel-release-6-8.noarch.rpm 2. yum list | ...