web页面自适应手机屏幕宽度
<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页面自适应手机屏幕宽度的更多相关文章
- 移动端H5页面自适应手机屏幕宽度
1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...
- 移动页面HTML5自适应手机屏幕宽度
标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...
- HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- 》》HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- WAP网站WML或HTML页面自适应手机屏幕实现方法
把图片和div的宽度都设置成:width:100%就可以了
- flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度
问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- 获取Android 手机屏幕宽度和高度以及获取Android手机序列号
1.获取Android 手机屏幕宽度 1 DisplayMetrics dm = new DisplayMetrics(); 2 this.getWindowManager().getDefaultD ...
- 使PC端网页宽度自适应手机屏幕大小
有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...
随机推荐
- 锋利的jQuery-4--停止动画和判断是否处于动画状态(防止动画加入队列过多的办法)
1.停止元素的动画:stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列,第二个参数代表是否直接将正在执行的动画跳转到末状态. 无参数stop():立即停 ...
- asp.net在线恢复数据库
用于asp.net还原与恢复SqlServer数据库的KillSpid存储过程 CREATE PROCEDURE KillSpid(@dbName varchar(20)) AS BEGIN DECL ...
- spring mvc静态资源文件的引用
在页面的<title>下 <link rel="stylesheet" href="<%=request.getContextPath()%> ...
- Substance风格实例大全javaswing皮肤风格大全(原)
转载请注明来路:http://www.cnblogs.com/langtianya/ 下图是所支持的设置 下面把上面的每一个选项的子选项进行试验 substance皮肤: AutumnSkin Bus ...
- Java调用动态库方法说明-最详细
Java不能直接调用由c或者c++写得dll(TF_ID.dll),所以只能采用jni得方法,一步一步生成符合规范得dll文件(假设叫FANGJIAN.dll),在FANGJIAN.dll这个文件里来 ...
- Grunt之项目脚手架
在网上搜了下,grunt这方面的教程挺少的,来去都是一些被频繁转载的文章.唉,人艰不拆啊. 首先我们在全局环境中安装grunt-init. npm install -g grunt-init 来看看官 ...
- Activity切换后，如i何保存上一个Activit的状态
在Activity切换中一般有三种方式保存上一个Activity的状态数据.一.全局变量 public static int type = 0;二.SharedPreference 保 ...
- 2012年湖南省程序设计竞赛E题 最短的名字
题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1115 解题报告:输入n个字符串,让你求出可以用来区别这些字符串的最少的前缀总共有多少个字 ...
- 详解HttpURLConnection
请求响应流程 设置连接参数的方法 setAllowUserInteraction setDoInput setDoOutput setIfModifiedSince setUseCaches setD ...
- 关于DCMTK3.6.0源代码编译的总结
1.DCMTK cmake出来的代码是一样的.MT和MD版本的区别在于DCMTK工程下的每个子工程的代码生成中的MT还是MD,只要修改成为相应的值就可以了. 2.依赖包的选择.依赖包必须与上面中所说的 ...