网页宽度自动适应手机屏幕宽度的方法

<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%",整个页面在设备上看起来就是全屏的了。

原文地址:http://blog.csdn.net/dier4836/article/details/7533879

时间: 2024-08-06 16:02:54

网页宽度自动适应手机屏幕宽度的方法的相关文章

网页宽度自动适应手机屏幕宽度的方法(借鉴)

<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.

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:

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

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } positi

ext:grid分页,列宽度自动填满grid宽度

var cm = new Ext.grid.ColumnModel([{      header : '编号',      dataIndex : 'id'     }, {      header : '名称',      dataIndex : 'name'     }, {      header : '描述',      dataIndex : 'descn'     }]);   var store = new Ext.data.Store({      proxy : new Ext

获取手机屏幕DisplayMetrics属性方法

首先,有一点需要声明,其实在android中,画布Canvas的高宽其实是屏幕的高宽. 如此一来,获得屏幕高宽的方法就很多了: 1. Java代码 WindowManager windowManager = getWindowManager(); Display display = windowManager.getDefaultDisplay(); screenWidth = display.getWidth(); screenHeight = display.getHeight(); 2.

手机怎么录游戏视频 手机屏幕录制的方法

如今在游戏市场中,根据2017年调研报告,手游市场的用户规模达到了7.76亿.手游市场份额不断的增长,但是手机怎么录游戏视频呢?这里笔者以刺激战场为例,为大家分享手机屏幕录制的方法.使用工具:1.首先在手机的设置中看是否自带录屏功能,如果有屏幕录制功能,可以直接通过手机自带的录屏功能进行录制,如果没有可以借助其他工具进行录制:2.首先在手机上使用第三方工具,之后在手机设置里找到权限管理,允许该工具显示悬浮窗.如果你的手机默认是允许打开悬浮窗的话,这一步可以省略的,如下图所示我已经打开了哦!3.之

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

网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max

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

1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem.sublime-settings文件. 设置px_to_rem的值为75即可. 在代码里输入设置的对应px值,按TAB键就可以转换为rem 在使用时,同事引用flexible.js文件 2.<meta name="apple-mobile-web-app-capable" cont

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

网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max