meta viewport使用说明

<meta name="viewport" content="user-scalable=no,initial-scale=1.3,minimum-scale=1.0,maximum-scale=2.0"/>
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。

user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放。

initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。

maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。

所有智能手机浏览器都支持ViewPort <meta>标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力

个人使用经验:1. 同时使用width和initial-scale时,若是initial-scale乘以width的值大于device-width会导致水平滚动条的显示(网页在水平方向上无法全部显示),而这中情况是移动端开发大部分情景下不希望出现的
时间: 2024-10-10 02:41:42

meta viewport使用说明的相关文章

meta (ASP) 使用说明

最近在看网站源码,看到使用meta,百度才发现这个用处蛮大的~   转载自:http://xueer818801.blog.163.com/blog/static/60216071200803111225468/ meta其实是html语言head区的一个辅助性标签.在几乎所有的网页里,我们都可以看到类似下面这段html代码:<META   http-equiv=Content-Type   content="text/html;   charset=gb2312">   

meta标签 使用说明(http-equiv、refresh、seo)

meta标签 使用说明(http-equiv.refresh.seo) meta标签,是在head标签里面,一般用做页面描述的.它的内容,用来描述页面一些信息的,如类型.编码.作者.简介等!虽然,它不作为页面布局显示,但实际上用途非常广的!具体的html定义在:meta定义 meta组成部分 meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能. name属性主要用于描述网页,与之对应的属性值为conten

Meta viewport (视口元信息标签)

前几天在研究移动版开发时,意外查阅到了PPK大神的关于viewport(视口)的三篇研究文档,但无奈全是英文,只好硬着头皮看下去,并顺便试着翻译一下,以备日后回顾. 本人水平有限,如翻译错误,欢迎指正 原文地址:http://www.quirksmode.org/mobile/metaviewport/#t10 读前须知:PPK写这篇文章的时候,IPhone还没有生产出4S之后的产品.所以,这篇文章中提到的IPhone,都是指IPhone4S及之前的手机. TOP This page conta

HTML meta viewport属性详解

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

HTML meta viewport属性说明(mark)

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

meta viewport 详解

ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设备进行了优化.ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表. <meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2.5, m

HTML meta viewport属性说明

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

meta viewport

如实例: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> width:viewport 的宽度,可以指定为一个像素值,如:600,或者为特殊的值,如:device-width (设备的宽度).height:viewport的高度.initial-sca

jq 动态判断设备添加对应meta viewport属性内同

1.常见的单位 dip, dp, px, sp之间的区别: dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖像素. px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多. pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用: sp: scaled pixels(