本文主要是给出了网站开发所需的主要技术,这同样适用于手机设备。如果你正在寻找Mozilla 火狐系统相关的项目,请参考Firefox OS 。或者你可能会对Firefox for Android感兴趣。

    我们准备用两个章节来组织本文的内容,designing for mobile devices 和cross-browser compatibility。另外,这还有一篇Jason Grlick为web开发者写的指南 mobile-friendliness






    • 弹性化CSS布局设计,保证当浏览器窗口的尺寸变化时网页也能流畅地适应
    • the use of media queries to conditionally include CSS rules appropriate for the device screen width and height

    The viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device.

    Working with touch screens

    To use a touch screen you'll need to work with DOM Touch events. You won't be able to use the CSS :hover pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. See this article on designing for touch screens.

    You can use the -moz-touch-enabled media query to load different CSS on a touch-enabled device.

    Optimizing images

    To help users whose devices have low or expensive bandwidth, you can optimize images by loading images appropriate to the device screen size and resolution. You do this in CSS by querying for screen height, width, and pixel ratio.

    You can also make use of CSS properties to implement visual effects like gradients and shadows without images.

    移动 APIs

    最后, 你可以利用移动设备提供的新可能性, 例如 orientationgeolocation



    创建能够完美工作在不同移动浏览器的web sites:

    • 请尽力避免使用特定浏览器的features, 例如CSS属性前的vendor-prefixed(浏览器厂商前缀,也称浏览器引擎前缀)。例如-moz-为Firefox|Firefox OS浏览器引擎使用到的前缀。
    • 如果你需要使用这些features, 请检查是否其它浏览器也有实现这些特性的版本。
    • 对于不支持这些特性的浏览器,请提供一个可接受的fallback。

    For example, if you set a gradient as a background for some text using a vendor-prefixed property like -webkit-linear-gradient, it's best to include the other vendor-prefixed versions of the linear-gradient property. If you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your linear-gradient rule.

    See this list of Gecko-specific properties, and this list of WebKit-specific properties, and Peter Beverloo's table of vendor-specific properties.

    Using tools like CSS Lint can help find problems like this in code, and preprocessors like SASS and LESS can help you to produce cross-browser code.


    It's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly. But sometimes this is impractical, and web sites resort to parsing the browser's user agent string to try to distinguish between desktops, tablets, and phones, to serve different content to each type of device.

    If you do this, make sure your algorithm is correct, and you aren't serving the wrong type of content to a device because you don't understand a partcular browser's user agent string. See this guide to using the user agent string to determine device type.


    在多个浏览器中测试你的web site。这意味着在多个平台测试—至少iOS和Android。


    Contributors to this page:
    最后编辑者: duan.xiaodong,