羊皮紙論壇

羊皮紙論壇

分享讓知識傳播,閱讀讓心靈成長, 創作讓文化傳承,讓我們共同努力。
  • 禁止廣告文
  • 知識傳播
  • 閱讀
  • 心靈成長
  • 創作
  • 文化傳承
發表新主題
隨機主題
上個主題
下個主題
|
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 登入來發表迴響。若使用羊皮紙會員身份發表迴響則可獲得經驗值及虛擬金幣,用來參加羊皮紙推出的活動。
發表迴響
 
驗證字串