Forum

Yampiz Forum

Sharing let knowledge Spreaded, Reading let spirits growth, Creative let culture extended, Let us
  • 禁止廣告文
  • 知識傳播
  • 閱讀
  • 心靈成長
  • 創作
  • 文化傳承
New Subject
Random
Previous
Next
|
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.
  • Keywords : 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


  • Now, you can post comments by Facebook Account when your Yampiz account was logout or unvariable. whatever, we suggest to post comment by Yampiz Account to get more bounds to join new events of Heyxu
Comment
 
Verify

Facebook Page

QR-Code and APP Launcher

User Guide
This Webpage

In those service tabs, "Scan QRCode, in mobile device" or "Click the button, in this device" to open webpage or APP-related operations.
QRCode
  • Auto Platform
    For better browsing experience, it will auto detects your device to display webpage.
  • Bug Report
    Tell us about the idea, problem and errors you found.
  • Comodo Secure
    The sensitive data transmission adopts by SSL-2048 authenticated encryption.
  • Copyright
    © 2009 YamPiz Digital Inc. & Jaby Group. All rights reserved.
  • Revised Version
    V2.2.197
    29 Oct 2024 (GMT+8)