羊皮纸论坛

羊皮纸论坛

分享让知识传播，阅读让心灵成长， 创作让文化传承，让我们共同努力。
  • 禁止广告文
  • 知识传播
  • 阅读
  • 心灵成长
  • 创作
  • 文化传承
发表新主题
随机主题
上个主题
下个主题
|
Meta viewport

The Viewport META Tag

Many smartphone browsers scale Web pages to a wide viewport width, one appropriate for displaying desktop-optimized markup. These browsers allow the user to zoom in and out of scaled Web pages. For example, Opera Mobile uses a default viewport width of 850 pixels, and the iPhone uses a default width of 980 pixels.

The Viewport META tag controls the logical dimensions and scaling of the browser viewport window in many smartphone browsers, including Safari Mobile for the iPhone, Android browser, webOS browser in Palm Pre and Pixi devices, Opera Mini, Opera Mobile and BlackBerry browsers. The presence of the Viewport META tag indicates that the markup document is optimized for mobile devices.

Here is a simplified version of the Viewport tag that sets the browser viewport width at 240 pixels and disables user scaling of the content:

程式项目名称
  1. /* 原始程式码 */
  2. <meta name="viewport" content="width=240,user-scalable=no" />

The content value of the Viewport META tag is a comma-delimited list of directives and
their values.

This example <meta> tag lists all Viewport directives and example values:

程式项目名称
  1. /* 原始程式码 */
  2. <meta name="viewport" content="width=240, height=320, user-scalable=yes,initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

This table lists the meanings and values of all supported directives of the Viewport META tag.

Viewport META directive Example Value Description
width width=320
width=device-width		 Logical width of the viewport, in pixels. The specialdevice-widthvalue indicates that the viewport height should be the screen width of the device.
height height=480
height=device-height		 Logical height of the viewport, in pixels. The specialdevice-heightvalue indicates that the viewport height should be the screen height of the device.
user-scalable user-scalable=no Specifies whether the user can zoom in and out of the viewport, scaling the view of a Web page. Possible values areyesorno.
initial-scale initial-scale=2.0 Sets the initial scaling or zoom factor (or multiplier) used for viewing a Web page. A value of 1.0
displays an unscaled Web document.
maximum-scale maximum-scale=2.5 Sets the user’s maximum limit for scaling or zooming a Web page. Values are numeric and can range from 0.25 to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents.
minimum-scale minimum-scale=0.5 Sets the user’s minimum limit for scaling or zooming a Web page. Values are numeric and can range from 0.25 to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents.
  • 关键字 : width, viewport, scale, height, scaling, Viewport, value, device, pixels, directives, values, scalable, minimum, maximum, initial, content, browsers, browser, multiplier, indicates
0 0
2012-06-21T08:50:00+0000

  • 当您未登入羊皮纸时，可以利用脸书 Facebook 登入来发表回响。若使用羊皮纸会员身份发表回响则可获得经验值及虚拟金币，用来参加羊皮纸推出的活动。
发表回响
 
验证字串