使用 viewport meta 标签在手机浏览器上控制布局

转载 2012年03月26日 16:07:41

什么是Viewport

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

Viewport 基础

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放

Viewport 参考资料

Mozilla 开发者博客上有 viewport 使用教程
Apple 开发者站上面有 viewport 详细的描述
quirksmode.org 有详细的 viewport 在各个手机浏览器不同之处介绍

转载自http://fairyfish.net/m/viewport-meta-tag/

在移动浏览器中使用viewport元标签控制布局

Mobile Firefox (Fennec) 1.1 增强了对 标签的支持。 此前版本的Fennec支持width、height及initial-scale这些viewport属性,然而对于...

【HTML5】开发之meta标签的viewport使用说明

随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而每一款手机有不同的分辨率,不同屏幕大...

手机浏览器<input type="file">标签调用手机拍照+分片上传

闲话不多说,开发背景也不是大家关心的话题。就直接说实现如题功能 首先,你的手机要支持html5吧(现在应该都支持吧) 然后,html代码只要一句就够了 上传 这样页面就会有出现一个选择文件的对话框...
  • jyxzfw
  • jyxzfw
  • 2016年09月08日 14:26
  • 1896

手机浏览器 使用事件委托 点击非可点元素的默认点击效果问题

在手机浏览器中,链接的点击会伴随着浏览器的默认效果。在iphone中是背景会变黑,安卓根据不同版本各有各的样式。   但是当使用使用事件委托后需要注意下,如果被点击的元素不是可点击的元素的话(什么是可...

手机浏览器市场份额统计 和 UserAgent使用

参考 http://www.cnsoftnews.com/news/201507/20932.html http://www.ccidnet.com/2015/0217/5770729.shtml ...

手机浏览器使用html5的datepicker,页面渲染完后value不显示的问题。

html5自带的input type=date能够在手机浏览器调用出自带的时间选择插件,但是设置好的默认时间就是不能在input框中显示出来,而需要在选择一个新的时间才能显示到input框中,但是实际...

非响应式设计也可以用Viewport Meta标签

我相信你肯定用了 viewport meta tag 来做响应式设计,但你是否知道 viewport 标签对非响应式设计业是非常有用的?如果你还从没将你的网站转换成为可响应的,就应该好好看下这篇文章,...
  • wowkk
  • wowkk
  • 2013年10月29日 00:08
  • 5930

Meta标签中的format-detection和viewport

Meta标签中的format-detection属性及含义  (2013-07-09 11:31:57) 转载▼ 标签:  format-detection   ...

Meta标签中的viewport属性及含义

惯例: 我是温浩然: 转载文章,要在显著位置标注转载来源:http://blog.sina.com.cn/s/blog_51048da70101cgdq.html 最近在学习移动网页开发,首先看...

<meta>标签之viewport

6,标签-viewport 大多数情况下 这个标签比上面要给力的多。viewport起源于apple,但现在被绝大多数移动浏览器所支持。这个标签的写法可以让你的layout viewport完全适...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用 viewport meta 标签在手机浏览器上控制布局
举报原因:
原因补充:

(最多只允许输入30个字)