zoukankan      html  css  js  c++  java

  • Android web开发快速入门

    通俗的讲，就是为移动设备开发网页。伴随着3G时代的到来、浏览器技术的不断进步，越来越多的人开始离开PC，使用手中的移动设备（手机、PSP、平板）上网。如果您是一个注意生活细节的人，那么在您乘坐地铁、公交的时候，请认真看看你周围的人都在干什么？是不是每人抱着一个手机在听音乐、看新闻、聊天呢？
            作为一个开发人员，如何开发出更适合于移动设备的网页呢？如何让您的站点能被多数移动设备更轻松地访问？本系列文章将会一一的为您解答。
            当今最受欢迎的手机系统包括 Android，iPhone ，Symbian，BlackBerry 与Web OS。这些系统浏览器都是基于webkit核心，而webkit号称是一款全功能的移动浏览器，支持 HTML + CSS + JavaScript，但由于移动设备本身与PC的差异，导致我们开发的网页在移动设备上总是会存在一些不如人意的地方。
            首先我们要接触的第一个概念就是“viewport”，翻译为中文可以叫做“视区”，大家都知道移动设备的屏幕一段都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。如下图所示，一个普通的文章页面在移动设备的效果：
    1.png
    2011-11-16 09:12 上传
    下载附件 (36.89 KB)

            页面以980像素加载，没为变形，但是按比例缩放后，已经没有多少东西是可以用肉眼看清的了，好在一般的移动设备都支持屏幕放大。放大之后，我们才能看清屏幕上的内容。
            怎么样，对viewport的概念有一定的了解了吧？那么我们能不能人为改变webkit的视区呢？当然能，在<head>与</head>之间加上如下视区代码：
    1. <meta name="viewport" content="width=500" />
    复制代码
    我们来看看页面加上强制视区大小命令后效果怎么样？ 如下图所示：
    2.png
    2011-11-16 09:12 上传
    下载附件 (46.34 KB)

    怎么样？是不是好了很多？那么有没有更好的方法呢？比如说我们自动检测移动设备屏幕大小，然后让内容自适应。很简单，看来面的代码：
    1. <meta name="viewport" content="width=device-width" />
    复制代码
    3.png
    2011-11-16 09:12 上传
    下载附件 (56.42 KB)
    device-width将自动检测移动设备的屏幕宽度。怎么样？满意了吧？所有页内容都和移动设备屏幕自适应。下面我们以一个列表页面为例，讲解一下如何让我们开发的页面能够在移动设备上完美的呈现。原始页面台下图所示： 4.png
    2011-11-16 09:12 上传
    下载附件 (9.27 KB)
    代码如下所示：
    1. <html>

    3. <head>

    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    7. <meta name="viewport" content="user-scalable=no,width=device-width" />

    9. <title>列表</title>

    11. </head>

    13. <body>

    15. <div id="header">

    17. <h1><a href="#">移动web列表演示</a></h1>

    19. </div>

    21. <div id="nav">

    23. <ul id="taskList">

    25.          <li><a href="pre.html">准备会议资料</a></li>

    27.          <li><a href="webmeeting.html">参加关于移动web开发的技术讨论会</a></li>

    29.          <li><a href="meetingjack.html ">会见客户Jack</a></li>

    31.          <li><a href="designdoc.html">整理XX系统设计文档</a></li>

    33. </ul>这里media属性就是根据屏幕属性选择不同的CSS，第一个的意思是，只有在屏幕宽度小于480px的时候使用android.css文件，第二个的意思是当屏幕大于481px时，使用tab.css文件。我们来看看android.css文件：</div>

    35. <div id="container"></div>

    37. <div id="footer"><span>Copyright © 2010-2015 IdeasAndroid.

    39. All rights reserved.</span></div>

    41. </body>

    43. </html>
    复制代码
    下面，我们介绍一个简单的概念，大家知道，我们开发的web页面需要在不同的设备上显示，我们需要在不同的设备上使用不同的样式表(CSS)，才能让我们的页面显示的更完美。比如说我们开发的页面需要在手机和平板电脑上使用不同的CSS，那么代码如下所示：
    1. <link rel="stylesheet" type="text/css" href="android.css"

    3.          media="only screen and (max- 480px)" />

    5. <link rel="stylesheet" type="text/css" href="tab.css"

    7.          media="screen and (min- 481px)" />
    复制代码
    这里media属性就是根据屏幕属性选择不同的CSS，第一个的意思是，只有在屏幕宽度小于480px的时候使用android.css文件，第二个的意思是当屏幕大于481px时，使用tab.css文件。我们来看看android.css文件：
    1. @CHARSET "UTF-8";

    3. body {

    5.          background-color: #ddd;

    7.          color: #222;

    9.          font-family: Helvetica;

    11.          font-size: 14px;

    13.          margin: 0;

    15.          padding: 0;

    17. }

    19. #header h1 {

    21.          margin: 0;

    23.          padding: 0;

    25. }

    27. #header h1 a {

    29.          background-color: #ccc;

    31.          border-bottom: 1px solid #666;

    33.          color: #222;

    35.          display: block;

    37.          font-size: 20px;

    39.          font-weight: bold;

    41.          padding: 10px 0;

    43.          text-align: center;

    45.          text-decoration: none;

    47.          <!–给标题增加1个像素白色的阴影，同时增加一个渐变背景 –>

    49.          text-shadow: 0px 1px 1px #fff;

    51.          background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc),

    53.                    to(#999) );

    55. }

    57. #container{

    59.          padding: 10px 10px;

    61. }



    65. #nav ul {

    67.          list-style: none;

    69.          margin: 8px;

    71.          padding: 0;

    73. }

    75. #nav ul li a {

    77.          background-color: #FFFFFF;

    79.          border: 1px solid #999999;

    81.          color: #222222;

    83.          display: block;

    85.          font-size: 17px;

    87.          font-weight: bold;

    89.          margin-bottom: -1px;

    91.          padding: 12px 10px;

    93.          text-decoration: none;

    95. }

    97. /*

    99. * 给列表第一项增加圆角效果

    101. */

    103. #nav ul li:first-child a {

    105.          -webkit-border-top-left-radius: 6px;

    107.          -webkit-border-top-right-radius: 6px;

    109. }

    111. /*

    113. * 给列表最后一项增加圆角效果

    115. */

    117. #nav ul li:last-child a {

    119.          -webkit-border-bottom-left-radius: 6px;

    121.          -webkit-border-bottom-right-radius: 6px;

    123. }

    125. #footer {

    127.          display: block;

    129.          padding: 10px 10px;

    131. }
    复制代码
    和普通页面一样，我们只是增加了适用于移动设备的背景渐变、阴影效果，还给列表的第一项上方和列表最后一项上方增加了圆角效果，最终效果如下图所示：
    5.png
    2011-11-16 09:12 上传
    下载附件 (12.81 KB)

    怎么样？在手机上是不是很漂亮？对于平板电脑使用的css,我们这里仅改变了一下背景颜色，在平板电脑上使用tab.css最终效果如下所示：
    6.png
    2011-11-16 09:12 上传
    下载附件 (34.15 KB)

    最后我们来完善一下我们的列表页面，使用jquery的ajax加载列表详细内容。最后实现的效果就是单击列表任意一项，如下所示：
    7.png
    2011-11-16 09:12 上传
    下载附件 (11.3 KB)

    在我们的css文件中，增加返回按钮样式，代码如下所示：
    1. #header div.leftButton {

    3.     font-weight: bold;

    5.     text-align: center;

    7.     line-height: 28px;

    9.     color: white;

    11.     text-shadow: 0px -1px 1px rgba(0,0,0,0.6);

    13.     position: absolute;

    15.     top: 7px;

    17.     left: 6px;

    19.     max- 50px;

    21.     white-space: nowrap;

    23.     overflow: hidden;

    25.     text-overflow: ellipsis;

    27.     border- 0 8px 0 14px;

    29.     -webkit-border-image: url(images/back_button.png) 0 8 0 14;

    31.     -webkit-tap-highlight-color: rgba(0,0,0,0);

    33. }



    37. #header div.leftButton.clicked {

    39.     -webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;

    41. }
    复制代码
    　　增加js文件android.js，代码如下所示：
    1. var hist = [];

    3. $(document).ready(function(){

    5.          $('#nav a').click(function(e){

    7.                    e.preventDefault();

    9.                    loadPage(e.target.href);

    11.                    });

    13.          loadPage("null");

    15. });



    19. function loadPage(url) {

    21.     $('#container').load(url, function(result){

    23.              if(url=='null'){

    25.                        $('#nav').show();

    27.              }else{

    29.                        $('#nav').hide();

    31.              }

    33.         var title = $('h2').html() || '<a>移动web列表演示</a>';

    35.         $('h1').html(title);

    37.         $('h2').remove();

    39.         $('.leftButton').remove();

    41.         hist.unshift({'url':url, 'title':title});

    43.         if (hist.length > 1) {

    45.             $('#header').append('<div class="leftButton">返回</div>');

    47.             $('#header .leftButton').click(function(e){

    49.                 $(e.target).addClass('clicked');

    51.                 var thisPage = hist.shift();

    53.                 var previousPage = hist.shift();

    55.                 loadPage(previousPage.url);

    57.             });

    59.         };

    61.     });

    63. }
    复制代码
    　　实现所有功能后列表页面完整的代码如下所示：
    1. <html>

    3. <head>

    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    7. <meta name="viewport" content="user-scalable=no,width=device-width" />

    9. <link rel="stylesheet" type="text/css" href="assets/css/android.css"

    11.          media="only screen and (max- 480px)" />

    13. <link rel="stylesheet" type="text/css" href="assets/css/tab.css"

    15.          media="screen and (min- 481px)" />

    17. <link rel="apple-touch-icon-precomposed" href="homeIcon.png" />

    19. <script type="text/javascript" src="assets/js/jquery.js"></script>

    21. <script type="text/javascript" src="assets/js/android.js"></script>

    23. <title>列表</title>

    25. </head>

    27. <body>

    29. <div id="header">

    31. <h1><a href="#">移动web列表演示</a></h1>

    33. </div>

    35. <div id="nav">

    37. <ul id="taskList">

    39.          <li><a href="pre.html">准备会议资料</a></li>

    41.          <li><a href="webmeeting.html">参加关于移动web开发的技术讨论会</a></li>

    43.          <li><a href="meetingjack.html">会见客户Jack</a></li>

    45.          <li><a href="designdoc.html">整理XX系统设计文档</a></li>

    47. </ul>

    49. </div>

    51. <div id="container"></div>

    53. <div id="footer"><span>Copyright © 2010-2015 IdeasAndroid.

    55. All rights reserved.</span></div>

    57. </body>

    59. </html>
    复制代码
    　　如上代码中，我们增加了一行灰色底色的代码：
    1. <link rel="apple-touch-icon-precomposed" href="homeIcon.png" />
    复制代码
    　　这段代码的作用是在android手机增加web快捷方式的到home主页时显示的图标。


    　　好了，最后总结一下我们进行android手机web开发的几个关键的东西：


    　　1、 viewport(视区)。


    　　2、 css文件自适应。


    　　3、 增加渐变、阴影、圆角等适用于移动设备的效果。


    　　4、 快捷方式图标：apple-touch-icon-precomposed。


    　　androidweb开发涉及到的东西还很多，本文仅是简单的介绍一点入门知识，更多的内容还需要自己去实践，去学习。希望本文对您有所帮助。
  • 相关阅读:
    Convolutional Sequence to Sequence Learning 论文笔记
    机器阅读理解（看经典MRC模型与花式Attention）
    Attention机制概述
    文本分类（TextRNN/TextCNN/TextRCNN/FastText/HAN）
    三大特征提取器（RNN/CNN/Transformer）
    UniGUI的布局使用说明
    Delphi获取文件名、文件名不带扩展名、文件名的方法；delphi 获取文件所在路径
    DELPHI如何获取某目录下的所有文件名?
    Delphi 自带的字符串分割函数split
    delphi 拆分字符串
  • 原文地址：https://www.cnblogs.com/sunrisefengfei/p/12392017.html
Copyright © 2011-2022 走看看