移动网络 - 需要考虑的事项? [英] Mobile Web - Things to consider?

问题描述

所以我正在创建我的第一个适合移动浏览器的网页.有哪些需要考虑的事项?

So I am creating my first webpage catered to mobile browsers. What are some things to consider?

1. 我如何为不同的设备(黑莓、iPhone、iPad 等)获得正确的分辨率?是否有人们正在使用的通用方法?某种框架?

1. How do I get the resolution right for different devices (Blackberries, iPhones, iPads, etc.)? Is there a common method that people are using? Some sort of framework?

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

How do I prevent zooming (on most touch screen phones, you can zoom in by pinching)?

还有哪些需要注意的事项?

What are some other things to keep in mind?

推荐答案

有很多好的做法可以遵循.以下是一些:

There are a ton of good practices to follow. Here are a few:

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

1. make the content shorter and easier to read. People can only scroll so much and read so much on a smaller screen size.
2. develop all your content in one single column. Make the width flexible (100% or close to it) so that it expands to fill the screen Do not make people horizontally scroll the page.
3. do not use a lot of a) scripts, b) css stylesheets, c) images. These require lots of downloading and will increase the page load time and the cost for the user (as most people on mobile pay per KB for Web browsing). Consolidate / gzip your files.
4. in your css, add extra line-height for easier reading.
5. in your css, add extra letter-spacing between numbers in phone numbers, for easier reading.
6. retain a link back to the full site, for those who want the full content.
7. include a back to top link at the bottom of the page, so users do not have to scroll all the way back up.
8. add padding to a hrefs so that it is easier to click/touch a link.
9. use HTML5 form types so that modern browsers will use the appropriate keyboards... http://diveintohtml5.ep.io/forms.html

这篇关于移动网络 - 需要考虑的事项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！