优化移动设备访问之规定缩放倍数

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

只有一行代码;这行代码就规定了网页初始缩放倍数为 1 倍。如果我们在电脑上调整浏览器的“分辨率”(窗口大小)测试网站好了,那么要在移动设备(如手机)上达到这个效果,必定需要这行代码。否则移动设备浏览器可能首次加载网站网页时,缩小网页。

当然,你也可以进行一些拓展。下面是关于 meta 标签 viewport 属性的更多内容信息:

  • width:viewport 的宽度。可以指定为一个像素值,如:600,或者为特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
  • height:viewport 的高度。
  • initial-scale:初始缩放比例,即当浏览器第一次加载页面时的缩放比例。
  • maximum-scale:允许浏览者缩放到的最大比例,一般设为 1.0。
  • minimum-scale:允许浏览者缩放到的最小比例,一般设为 1.0。
  • user-scalable:浏览者是否可以手动缩放,yes(或 true) 或 no(或 false)

大部分手机浏览器都支持这个语句,据说 Opera Mobile 要达到 9.5 才支持。

若无特别说明,本文系原创,遵循 署名-非商业性使用 3.0 (CC BY-NC 3.0) 协议,转载文章请注明来自【闪星空间】,或链接上原文地址:http://shansing.com/read/314/

6 条评论

  1. 闪星的广告宽度完全破坏了手机版。。手机可以左右划

    1. 呃,是底部的达人秀的广告的问题。感谢报告,现已解决!

  2. 手机里可以不要加广告嘛,点的人又不多

    1. 现在优化了,也不是很碍事。话说广告位没人来投放广告才是个问题。

  3. GW GW

    非常感谢,已经解决,然而设置成不能缩放对小屏幕手机似乎并不友好。

    1. 所以你认为自适应设计是什么?只是布局的自适应吗?

发表评论»

NO SPAMS! 不要发垃圾评论哦!

表情