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.

    Mobile APIs

    Finally, you can take advantage of the new possibilities offered by mobile devices, such as orientation and geolocation.

    Cross-browser development

    Write cross-browser code

    To create web sites that will work acceptably across different mobile browsers:

    • Try to avoid using browser-specific features, such as vendor-prefixed CSS properties.
    • If you do need to use these features, check whether other browsers implement their own versions of these features, and target them too.
    • For browsers that don't support these features, provide an acceptable 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.

    Take care with user agent sniffing

    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.

    Test on multiple browsers

    Test your web site on multiple browsers. This means testing on multiple platforms — at least iOS and Android.

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, wanglong
    最后编辑者: wanglong,