mozilla
您的搜索结果

    手机网页开发

    这篇文章需要技术审查。

    这篇文章需要编辑方面的审查。

    这篇翻译不完整。请帮忙从英语翻译这篇文章

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

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

    手机设备设计

     

    与台式机和笔记本相比,在硬件特性上手持设备有非常大的不同。当然通常他们的屏幕尺寸更小,另外一个特性是当用户旋转设备时,他们会在portrait和landscape模式下自动切换。旋转用户输入一般通过触屏。类似地理定位和排列方向这样在台式机上没有多大作用的API,在手机用户使用你网站的时候有了全新的体验!

    在更小的屏幕下工作

    响应式网页设计是一项让你的网站在手持设备上通过不同的使用环境进行自动适应的技术,通常来说体现在尺寸和屏幕的排列方向上。他包含下面的技术:

    • 弹性化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,