使用 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/

相关文章推荐

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

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

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

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

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

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

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

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

Meta标签中的format-detection和viewport

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

浏览器内核控制Meta标签说明文档

转载:http://se.360.cn/v6/help/meta.html 浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:...
  • t0591
  • t0591
  • 2016-05-25 13:55
  • 188

Meta标签中的viewport属性及含义

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

<meta>标签之viewport

6,标签-viewport 大多数情况下 这个标签比上面要给力的多。viewport起源于apple,但现在被绝大多数移动浏览器所支持。这个标签的写法可以让你的layout viewport完全适...

Html中meta标签的用法及viewport属性简介

meta标签是html语言head区的一个辅助性标签,它一般位于标签和标签之间,提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;它可...

Meta标签中的viewport属性

一、什么是Viewport 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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