在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢。在网上,大家会得到很多答案。我从网上搜集了部分介绍,整理一下,以留备用。
<meta name="viewport" content="width=device-width">
或者
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放
“viewport”,翻译为中文可以叫做“视区”,大家都知道移动设备的屏幕一般都比PC小很多,webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上,默认的虚拟窗口为980像素宽(目前大部分网站的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。也就是说当我们加载一个普通网页的时候,webkit会先以980像素的浏览器标准加载网页,然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。如下图所示,一个普通的文章页面在移动设备的效果:
页面以980像素加载,没有变形,但是按比例缩放后,很多东西用肉眼基本看不清了。
那么我们能不能人为改变webkit的视区呢?当然能,在<head>与</head>之间加上如下视区代码:
<meta name="viewport" content="width=500"/>
我们来看看页面加上强制视区大小命令后效果怎么样? 如下图所示:
那么有没有更好的方法呢?比如说我们自动检测移动设备屏幕大小,然后让内容自适应。看下面的代码,device-width将自动检测移动设备的屏幕宽度:
<meta name="viewport" content="width=device-width" />
转自:http://www.cnblogs.com/duanhuajian/archive/2012/10/31/2748644.html
分享到:
相关推荐
H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 viewport 是用户网页的可视区域。翻译为中文...
3、采集和生成HTML页面都只需要做一次就行了,其他的交给浏览器。 4、不用建PC站和WAP站,就省去了做跳转,手机打开网站直接显示WAP站,不用再等待跳转到WAP。 5、能访问到的每个页面都使用了自适应样式。 演示...
主要介绍了HTML5 移动页面自适应手机屏幕宽度的相关资料,需要的朋友可以参考下
一款html5的响应式列自适应布局单页模板,整个页面分为两列,当鼠标向下滚动页面时,左右两列分别从两侧移动到中间。整体布局十分美观。
“前端是专门做网页的,即前端网站的前端部分,运行在PC、移动等浏览器上,展示网页供用户浏览。前端网站是指网站的前端部分,包括网站的表示层和结构层,前端工作内容主要有两类,Web UI和Web App,UI主要用于制作...
60多套html5移动端模板,适合研究一下,请放心下载,如有疑问,请留言
h5英文自适应移动手机平板网站html静态模板
关键词:HTML5,检测与认证,Android,多窗口浏览器模式,跨域处理,页面自适应 Abstract At present business processes are old and explicit in industrial market of certification and detection filed, as ...
完美的seo,所有页面均都能完全自定义标题/关键词描述,PHP程序,安全、稳定、快速; 后台:域名/admin.php 账号:admin 密码:admin 配置需求:语言程序:PHP + SQLite前端规范:html+css+jQuery设备支持:PC端+...
第一个遇到的就是网页大小自适应的问题。 目前比较常用的方法有: • 首先要让页面大小铺满屏幕又不能溢出。只需要在html<head>标签内加入viewport(如下),参数分别表示:页面宽度= 屏幕宽度,最大和最小...
网易严选移动端页面,实现自适应布局
Minty是一款小清新风格的WordPress主题,使用 HTML5+CSS3 实现响应式设计完美适配移动端,支持 WordPress 3.1 新增的所有文章格式,支持AJAX评论与列表页无限加载,内置 8 种主题色彩。主题取名为Minty,希望能带给...
简洁的web端和自适应移动端,聊天界面,有左侧好友列表,右侧聊天窗口,底部表情栏,语言输入框,点击单个好友聊天,好友分组,查看好友信息,好友动态空间等
下载无需扣分,具有一定收藏价值,特此奉献! 目录如下。 javascript主页弹出窗口技巧.html div span layer的区别.html email地址的分割.html ... 页面的打开移动.html 页面进入和退出的特效 .html
HTML5企业移动化公司响应式模板基于AmazeUI2.7.2制作,自适应分辨率,兼容PC端和移动端,全套模板,包括首页、产品中心、客户案例、解决方案、新闻中心、注册、登录、关于我们、加入我们、联系我们等网站模板页面。
HTML5企业移动化公司响应式模板基于AmazeUI2.7.2制作,自适应分辨率,兼容PC端和移动端,全套模板,包括首页、产品中心、客户案例、解决方案、新闻中心、注册、登录、关于我们、加入我们、联系我们等网站模板页面。
此款源码适合基建、施工、地产、物业等房地产类企业拿来做自己的企业官网,前端采用自适应HTML5模板,自动适应手机端和电脑端页面,所有数据全部打通,只需要一个后台即可。 主要功能如下: 文章管理:支持文章的「...
响应式自适应各种移动设备,同一个后台,数据即时同步,简单适用! 原创设计、手工书写DIV CSS, 完美兼容IE7 、Firefox、Chrome、360浏览器等;主流浏览器; 页面简洁简单,容易管理,DEDE内核都可以使用;附带...
Videojs插件功能将MP4视频文件嵌入到帖子/页面或WordPress网站上的任何位置从移动设备观看时,嵌入响应式视频以提供更好的用户体验嵌入与所有主要浏览器兼容HTML5视频嵌入带有海报图像的视频使用videojs播放器嵌入...