优化移动设备的网站 [英] Optimizing website for mobile devices

查看:89
本文介绍了优化移动设备的网站的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在开发专门针对移动浏览器的网站. 我应该遵循哪些准则来优化网站以进行移动开发? 我主要担心的是:

I am developing a website exclusively for mobile browsers. What guidelines should I follow to optimize the site for mobile development? My main concerns:

  1. 大多数移动设备具有适当的浏览器.

  1. Most mobile devices have propriety browsers. How can the app be tested on those different browsers (testing on an actual device is not possible due to security restrictions)?

如何针对不同屏幕尺寸优化网站?

How to optimize the site for different screen sizes?

如何使应用触摸友好?

如何检测设备的方向(在带有加速度计的设备中)?

How to detect orientation of devices (in devices that come with an accelerometer)?

如何检查设备不是台式机/笔记本电脑?

How to check that the device is not a desktop/laptop?

推荐答案

设计移动网站时所用的东西.

Things that I have used when designing mobile websites.

  1. 查找您计划支持的设备范围.您可以问的一些问题是
    • 您是否仅支持智能手机
    • 您打算支持哪些平台(iPhone,Android,Symbian?)
  1. Find out the range of devices that you are planning to support. Some questions that you can ask are
    • Are u going to support only smartphones
    • What platforms are u planning to support ( iPhone, Android, Symbian ? )

您可以收集的各种Analytics(分析)可以回答许多问题.如果您的统计数据很少,则可以遵循此策略.

A lot of you questions can be answered by the kind of Analytics that you are able to gather. If you have very less statistics then you can follow this strategy to start with.

  1. 将设备的目标范围划分为

  1. Separate out the target range of devices into

  • simple(基本的手机,具有最少的浏览功能.)-为他们设计一个非常简单的纯香草网站.
  • medium(具有对JavaScript的支持不佳的浏览器的较早版本的智能手机)-设计一个功能稍强的网站.
  • 高端智能手机(iPhone,Android,WebOS)-提供这些手机支持的爵士功能.

使用设备检测库(例如WURFL/.Mobi)进行设备检测,并使用WALL来动态呈现内容.

Use a device detection library like WURFL / .Mobi for device detection and WALL for dynamic rendering of content.

您可以使用.Mobi来检测符合HTML5的移动浏览器.这样,您可以在支持它的设备中利用HTML5功能.

You can use .Mobi to detect an HTML5 compliant mobile browser. That way, you can take advantage of HTML5 capabilities in the devices that support it.

对于测试,您可以采用这种方法

For testing you can follow this approach

  • 在浏览器上进行测试-Firefox/Safari/Opera具有用于更改USER_AGENT的插件,并且可以模拟移动测试.
  • 在模拟器上进行测试-所有设备平台均提供免费下载的模拟器
  • 如果需要,请尝试在任何地方/完善设备之类的设备仿真产品.

我希望我能至少澄清一些问题. :)

I hope I was able to clarify atleast some of you questions. :)

这篇关于优化移动设备的网站的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆