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像素的宽度。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。如下图所示,一个普通的文章页面在移动设备的效果:

    页面以980像素加载,没有变形,但是按比例缩放后,已经没有多少东西是可以用肉眼看清的了,好在一般的移动设备都支持屏幕放大。放大之后,我们才能看清屏幕上的内容。 

    怎么样,对viewport的概念有一定的了解了吧?那么我们能不能人为改变webkit的视区呢?当然能,在<head>与</head>之间加上如下视区代码:

    <meta name="viewport" content="width=500" />
    我们来看看页面加上强制视区大小命令后效果怎么样? 如下图所示:
    怎么样?是不是好了很多?那么有没有更好的方法呢?比如说我们自动检测移动设备屏幕大小,然后让内容自适应。很简单,看来面的代码:
    <meta name="viewport" content="width=device-width" />

    device-width将自动检测移动设备的屏幕宽度。

    怎么样?满意了吧?所有页面内容都和移动设备屏幕自适应。

  • 相关阅读:
    Time Zone 【模拟时区转换】(HDU暑假2018多校第一场)
    HDU 1281 棋盘游戏 【二分图最大匹配】
    Codeforces Round #527 (Div. 3) F. Tree with Maximum Cost 【DFS换根 || 树形dp】
    Codeforces Round #527 (Div. 3) D2. Great Vova Wall (Version 2) 【思维】
    Codeforces Round #527 (Div. 3) D1. Great Vova Wall (Version 1) 【思维】
    Codeforces Round #528 (Div. 2, based on Technocup 2019 Elimination Round 4) C. Connect Three 【模拟】
    Avito Cool Challenge 2018 E. Missing Numbers 【枚举】
    Avito Cool Challenge 2018 C. Colorful Bricks 【排列组合】
    005 如何分析问题框架
    004 如何定义和澄清问题
  • 原文地址:https://www.cnblogs.com/linjiqin/p/2076809.html
Copyright © 2011-2022 走看看