`

Mobile Web

 
阅读更多

The viewport metatag (Mobile web part 1)

 

 

使用方式：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 

引入问题：

   好了，你安定下来，学习如何编写一个为移动设备使用您的桌面网站建设知识网站。所以，你开始与一些非常基本的HTML。

 

 

<html>  
<head>  
    <title>Hello world!</title>  
</head>  
  
<body>  
  
<p>Hello world!</p>  
  
</body>  
</html>

 

好的！不能在简单了。你检查出来，它所有的桌面浏览器上看起来不错，然后你检查出来您的移动设备。

 

       

 

      Hello World on the iPhone

 

天啊！哪里，我们出问题了吗？显然是没有放大阅读的文本。


这是在移动网站上的第一课：宽度是你的敌人。这是会在许多无数设备上遇到的宽度问题。

 

从逻辑上讲，它似乎很有道理：移动Safari在页面的，假设打开的是一个网站，并且会默认宽度是980px，这样，页面根据手机屏幕大小相应缩放，那么里面的内容也跟着缩放了。

 

Viewport

 

 

我们需要做的是告诉浏览器这个网页是为移动优化。这是viewport meta进入视野。
现在，我们调整我们的Hello World，只是有点...

 

 

<!doctype html>  
<html>  
<head>  
    <title>Hello world!</title>  
  
    <meta name="viewport" content="width=device-width"/>  
</head>  
  
<body>  
  
<p>Hello world!</p>  
  
</body>  
</html>
 

 

正常了

 

好多了！通过设置视口的宽度等于“设备宽度”，我们基本上告诉它的设备宽度是320px，而不是默认980px，它猜中。如果我们设置宽度= 320将iPhone和其他一些智能手机上实现了相同的结果，但并不是所有的手机都有这个确切的宽度，所以最好简单地设置设备的宽度，并让手机浏览器弄清楚。

 

很多只智能手机都支持viewport metatag ,  iPhone ， Android ， webOS (Palm) ，Internet Explorer Mobile, Opera Mini ， Opera Mobile.

 

More fun with the viewport tag

 

 

In addition to solving our biggest concern with the width of the content, the viewport tag has more options to play with:

Property Description
width Width of the viewport in pixels (or device-width). If width isn’t set, it defaults to a desktop size (980px on mobile Safari).
height Height of the viewport in pixels (or device-height). Generally you don’t need to worry about setting this property.
initial-scale (0 to 10.0) Multiplier that sets the scale of the page after its initial display. Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out
minimum-scale (0 to 10.0) The minimum multiplier the user can “zoom out” to. Defaults to 0.25 on mobile Safari.
maximum-scale (0 to 10.0) The minimum multiplier the user can “zoom in” to. Defaults to 1.6 on mobile Safari.
user-scalable (yes/no) Whether to allow a user from scaling in/out (zooming in/out). Default to “yes” on mobile Safari.

 

 

 

以上文章翻译自：http://davidbcalhoun.com/2010/viewport-metatag

分享到：
| xmpppy + openfire
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics