移动网络-需要考虑的事情? [英] 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％或接近100％)，以便其展开以填充屏幕.不要使人们水平滚动页面.
3. 不要使用很多a)脚本，b)css样式表，c)图像.这些需要大量下载，并且会增加页面加载时间和用户成本(因为大多数移动用户在Web浏览时按KB付费).合并/gzip您的文件.
4. 在您的css中，添加额外的line-height，以便于阅读.
5. 在您的css中，在电话号码之间添加额外的letter-spacing，以便于阅读.
6. 为那些想要完整内容的人保留指向完整网站的链接.
7. 在页面底部添加一个返回页首的链接，因此用户不必一直向上滚动.
8. 在a hrefs中添加填充，以便更轻松地单击/触摸链接.
9. 使用HTML5 form types，以便现代浏览器将使用适当的键盘... 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屋！