移动网络 - 需要考虑的事项?

时间:2011-05-28 13:17:43

标签: mobile mobile-website

所以我正在创建迎合移动浏览器的第一个网页。有什么需要考虑的事情?

  1. 如何获得适合不同设备(黑莓,iPhone,iPad等)的分辨率?人们使用的是一种常用方法吗?某种框架?

  2. 如何防止缩放(在大多数触摸屏手机上,您可以通过捏合放大)?

  3. 要记住哪些其他事项?

2 个答案:

答案 0 :(得分:5)

要遵循许多良好做法。以下是一些:

  1. 使内容更短,更易于阅读。人们只能滚动这么多,并在较小的屏幕尺寸上阅读。
  2. 在一个列中开发所有内容。使width灵活(100%或接近它),使其扩展以填充屏幕不要让人们水平滚动页面。
  3. 不要使用很多a)脚本,b)css样式表,c)图像。这些需要大量下载,并且会增加页面加载时间和用户的成本(因为大多数人使用移动设备支付每KB用于Web浏览)。合并/ gzip您的文件。
  4. 在您的css中,添加额外的line-height以便于阅读。
  5. 在您的css
  6. ,在电话号码中的号码之间添加额外letter-spacing,以便于阅读。
  7. 为想要完整内容的用户保留一个返回完整网站的链接。
  8. 在页面底部包含一个返回顶部的链接,因此用户无需一直向上滚动。
  9. a hrefs添加填充,以便更轻松地点击/触摸链接。
  10. 使用HTML5 form types,以便现代浏览器使用相应的键盘... http://diveintohtml5.ep.io/forms.html

答案 1 :(得分:3)

只需创建具有液体布局的普通网页,让浏览器负责选择合适的宽度。

如果您知道您的网页可以很好地缩小到移动屏幕尺寸,请向浏览器提供一条线索,表明它可以在没有缩放的情况下以1:1显示页面。包含在<head>

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

我强烈建议尝试禁用缩放(user-scalable=no),因为这是一项有用的功能,您无法通过阻止获得任何内容。