`
WebAppTrend
  • 浏览: 54952 次
社区版块
存档分类
最新评论

Android官方文档之Web Apps最佳实践

 
阅读更多

为移动设备开发web页面或者web应用与为桌面浏览器开发web页面不同，会出现很多新的挑战。为了帮助你开始，下面是一系列你需要遵循的最佳实践，以便为Android和其他移动设备提供最有效的web应用。

  1. 1.  将来自移动设备的请求重定向到专门为移动端设计的Web版本

有 好几种方式可以让你使用服务端的重定向将请求重定向到你的web站点的移动版本上去。最常见的情况是通过“嗅探”（"sniffing"）web浏览器提 供的用户代理字符串（User Agent string）。为了确定是否要提供一个你的站点的移动版本，你只需要在User Agent中寻找“mobile”字符串即可，它可以与很多移动设备匹配。如果需要的话，你还可以在用户代理字符串中找到特定的操作系统（比如 Android 2.1）。

注意： 大屏幕的Android设备需 要全尺寸的网站（比如平板电脑），因此在user agent中不包含“mobile”字符串，但它的user agent的其他部分基本是一样的。由于这种情况的存在，你在发送你的站点的移动端页面的时候，一定要确认user agent中是否包含“string”字符串。

  1. 2.   使用合适于移动设备的有效的 DOCTYPE 标记

为移动站点设计的最常见的标记语言是 XHTML Basic 。这一标准确保了特定的标记可以在移动设备上有最佳表现。例如，它不支持HTML框架或是嵌套表格，因为这些在移动设备上表现都很糟。除了声明DOCTYPE，还要声明合适的字符编码（比如UTF-8）。

例如：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

一定要确认你的web页面的标记对于已经声明的DOCTYPE来说是有效的。可以使用验证器（validator），比如由http://validator.w3.org 提供的一个。

  1. 3.   使用 viewport 元数据来将页面调整至合适大小

在 你的文档的<head>部分，你需要提供元数据来指定你希望如何在浏览器的viewport中呈现你的页面。例如，你的viewport的元 数据可以指定浏览器的viewport的高和宽，最初的web页面规模甚至是目标屏幕分辨率（target screen density）。

例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

想要获取更多关于如何为Android设备使用viewport元数据的信息，请阅读Targeting Screens from Web Apps 。

  1. 4.   避免多文件请求

因 为移动设备通常比台式机的联网速度慢得多，因此你需要想办法让你的页面尽快加载。一种加速加载方法是避免下载额外文件，比如<head>中的 样式表和脚本文件。相反，直接在<head>部分提供CSS或者Javascript即可（如果脚本是在页面加载完以后才用到，那么将其包含 在<body>的结束部分也可）。同样，你还可以通过类似于Minify 的工具来压缩你的文件。

  1. 5.   使用一个垂直的线性布局（ Use a vertical linear layout ）

在导航页面的时候，要避免让用户左右拖动你的页面。对于用户来说，上下拖动更容易，也让你的页面更简单。

要想知道更多关于如何创建伟大的移动web应用，请看W3C的移动设备最佳实践 。要看其他提升站点速度的建议（移动设备和桌面设备都适用），请看Yahoo！的最佳性能  指南以及Google在让web 更快 的加速教程。

 

原文链接：Best Practices for Web App

 

译文来源：http://www.webapptrend.com/
 WebAppTrend是一个独立的技术博客，关注Web App前瞻和实践，以及智能浏览器发展 

请大家在关注ITeye的同时，关注我们的新浪微博 @WebAppTrend，关注我们的腾讯微博@WebAppTrend，Q Q群见官方博客右侧。
分享到：
| Android官方文档之Web Apps调试
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Office Web Apps示例程序

    总的来说，这个"Office Web Apps示例程序"为开发者提供了一个实践OWA集成的起点，通过学习和分析这个项目，我们可以掌握如何在自定义Web应用中集成Office文档处理功能，提升用户体验并扩展应用的功能范围。...

    Pro Android Web Apps, Develop For Android Using HTML5 CSS3 & JavaScript.pdf

    ### Pro Android Web Apps：利用HTML5、CSS3与JavaScript开发 #### 一、书籍概述 《Pro Android Web Apps: Develop for Android Using HTML5, CSS3 & JavaScript》是一本旨在教授开发者如何利用HTML5、CSS3及...

    基于Progressive Web Apps的兼职云服务系统.pdf

    标题为"基于Progressive Web Apps的兼职云服务系统"，暗示着文档将围绕Progressive Web Apps（渐进式网络应用，简称PWA）技术来构建一个服务于兼职市场的云服务平台。文档的核心内容将涉及云服务系统、云技术以及PWA...

    WebViewGold for Android v13.8网站和Web应用程序转换为Android应用程序项目源码JAVA

    让我们将您的网站和Web应用程序转换为Android应用程序。此应用程序模板支持各种Web应用程序/网站（包括HTML，PHP，WordPress，Progressive Web Apps，HTML 5 Games，WiX，Jimdo，apprat.io，bubble，Webflow，...）...

    WebViewGold for Android v13.8网站和Web应用程序转换为Android应用程序项目源码

    让我们将您的网站和Web应用程序转换为Android应用程序。此应用程序模板支持各种Web应用程序/网站（包括HTML，PHP，WordPress，Progressive Web Apps，HTML 5 Games，WiX，Jimdo，apprat.io，bubble，Webflow，...）...

    QUE.Android.Apps.Marketing.Sep.2010.rar

    《QUE.Android.Apps.Marketing.Sep.2010.pdf》这份文档，作为压缩包中的唯一文件，很可能是对以上所有概念的详细解读，包括理论知识、实战技巧以及对2010年Android应用市场的深度洞察。对于想要了解早期移动应用营销...

    Building Android Apps with HTML, CSS, and JavaScript

    - **最佳实践**：分享了一些行业内的最佳实践，帮助开发者避免常见的陷阱并提高开发效率。 #### 八、资源推荐 - **在线教程和文档**：推荐了一些权威的在线资源，供读者进一步学习和参考。 - **社区支持**：介绍了...

    Build_iOS_and_Android_mobile_apps_in_record_time.pdf

    《Build iOS & Android mobile apps in record time.pdf》这份文档详细介绍了如何利用Flutter框架与AWS Amplify服务来实现这一目标。通过这两个工具的结合使用，开发者可以极大地提高开发效率，并构建出高质量的移动...

    Android英文非影印版

    开发书籍].Pro.Android.Web.Apps.Develop.for.Android.using.HTML5,.CSS3.&.JavaScript.pdf [android.开发书籍].Beginning.Android.Games.pdf [android.开发书籍].Hello.Android.3rd.Edition.pdf [android.开发书籍]...

    MASTERING_FIREBASE_FOR_ANDROID_DEVELOPMENT.pdf

    综上所述，这本书是一本非常有价值的资源，不仅覆盖了Firebase在Android开发中的应用，还可能包含了云原生应用开发的最佳实践和实战技巧。对于希望提升Android应用性能，以及希望利用云端服务扩展应用功能的开发者来...

    Hbuilder项目Android Studio本地打包详细步骤

    - 在Android项目的`assets`文件夹下创建`apps`文件夹，再新建一个以`manifest.json`中的`id`命名的文件夹。 - 将HBuilder生成的资源文件夹`www`复制到上述创建的文件夹内。 7. **复制data文件夹**： - 复制`...

    Android源代码目录分析

    在深入探讨Android源代码目录分析之前，我们先要理解Android系统的整体架构。Android是一个开源的操作系统，主要由Linux内核、运行库层、应用程序框架层和应用程序层组成。每个层次都包含一系列组件和服务，共同构成...

    html android开发

    #### 二、Web Apps与Native Apps对比 1. **Web Apps** - **定义**: Web Apps是通过浏览器运行的应用程序，它们通常使用HTML、CSS和JavaScript编写。 - **优势**: - 跨平台：可以在任何支持浏览器的设备上运行。 ...

    Web-Apps:网路应用程式

    Web应用程序，通常被称为Web Apps，是通过互联网浏览器运行的应用程序，它们无需在用户计算机上安装即可使用。这种技术使得Web应用程序具有广泛可访问性，因为只需一个网络连接和任何能够浏览网页的设备即可使用。...

    使用HTML,CSS,JavaScript开发Android应用程序教程

    ##### Web Apps Versus Native Apps **Web Apps** - **定义**：Web应用程序是指可以在任何现代浏览器上运行的应用程序。 - **优点**： - 跨平台兼容性好，只需要编写一次代码即可在多种设备上运行。 - 更新方便...

Magicbox
Global site tag (gtag.js) - Google Analytics