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

2024-05-11 06:58:35

什么是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 在各个手机浏览器不同之处介绍。

转载于:https://www.cnblogs.com/dachao/archive/2012/05/28/2520987.html

viewport meta 标签在手机浏览器上控制布局相关推荐

php手机播放音乐代码,在手机浏览器上播放音乐的代码
今天心血来潮想给自己的一个网页做上背景音乐,并在手机浏览器上支持播放,翻了很多地方,尝试了无数个代码,终于让我找到一个解决办法,相信对很多php程序开发会有帮助的. 代码如下: 您的浏览器不支持音频播 ...
如何在手机浏览器上访问在电脑上运行的javaweb项目
1,确保手机和你的电脑处于一个局域网内 2,记得在windows防火墙内打开相应的端口号.比如你的javaweb项目是在tomcat上运行的,那么一般它的默认端口号是8080. 具体方法如下, 1,关 ...
使用meta属性禁用手机浏览器的缩放功能
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能.这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看 ...
html网页钩子,HTML5中的meta标签和 IE浏览器能识别的钩子
一.meta 标签的使用 1. 使用描述 description属性增加点击率 2. 设置字符集 3. 重定向和定时刷新功能 4.设备宽度自适应(针对移动设备) content 参数: width ...
H5页面在手机浏览器上无法播放视频或无法切换视频源的解决方案
一.无法播放视频问题部分手机浏览器,例如UC浏览器,无法播放H5页面的视频,播放视频要么一直转圈加载,要么报-9324,19000错误. 网上的资料大部分都说是video标签的参数配置不对.浏览器版 ...
如何在手机浏览器中控制扫描仪做文档扫描
办公室里扫描仪必不可少.现在智能化办公,有时候我们会希望文档扫描之后直接传输到手机里.如果用的是带WiFi的智能扫描仪,那么可以通过安装app来获取电子文档.如果用的是普通扫描仪,那么只能先通过PC获 ...
实现HTML页面在手机浏览器上全屏的方式
在手机等移动设备上,很多内置的浏览器会缩放页面,为了是页面全屏无缩放,需要在页面的head部分加如下代码: <head> <meta name="viewport" ...
html5手机网站需要加的那些meta标签，手机网站自适应
1.移动网站要加的html5相关meta和标签 a. <meta name="viewport" ...
去除iPhone手机浏览器上给电话号码自动加上的link样式
iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给像是电话号码的数字加上link样式. 可以添加下面的meta禁用掉这个功能. <meta name="form ...

最新文章

热门文章