移动web开发--Hello world

来源：互联网发布：mac的flash屏蔽编辑：程序博客网时间：2024/05/16 12:48

移动端和PC端在代码书写上有什么区别呢？

下面是基础的HTML模板，使用工具自动生成的：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body></body></html>

这段代码，并没有告诉我们移动端开发有什么不同，现在需要加一些东西。

<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>标题</title><link rel="stylesheet" href="index.css"></head><body>    Hello World!</body></html>

我们可以看到，上面就是加了很多meta, meta标签用来干什么的不知道？meta

meta用来描述页面相关的一些信息。

1、用来描述视口的信息，将宽度设置为设备的宽度，初始化缩放比例为1，最大放大比例为1，不允许用户被缩放，我们还可以设置最小缩小比例minimum-scale=1.0

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

2、用来描述是都删除苹果设备默认的工具栏和菜单栏，yes删除，no保留

<meta content="yes" name="apple-mobile-web-app-capable">

3、描述苹果设备的状态栏样式，可选值有black黑色,default默认白色,black-translucent灰色

<meta content="black" name="apple-mobile-web-app-status-bar-style">

4、描述是否将页面上的数字格式化为电话连接，yes为格式化，no为不格式化

<meta content="telephone=no" name="format-detection">

5、描述是否将页面上的文字格式化为电子邮件，yes为格式化，no为不格式化

<meta content="email=no" name="format-detection">

6.描述内核渲染模式，可用于国内的双核浏览器，如搜狗，QQ，360，遨游。可用取值有webkit,ie-comp,
ie-stand。

 <meta name="renderer" content="webkit">

7、优先使用最新版本和Chrome，

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

8、针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓

<meta name="HandheldFriendly" content="true">

9、微软的老式浏览器

<meta name="MobileOptimized" content="320">

9、uc强制竖屏

<meta name="screen-orientation" content="portrait">

10、QQ强制竖屏

<meta name="x5-orientation" content="portrait">

11、 UC强制全屏

<meta name="full-screen" content="yes">

12、 QQ强制全屏

<meta name="x5-fullscreen" content="true">

13、UC应用模式

<meta name="browsermode" content="application">

14、QQ应用模式

<meta name="x5-page-mode" content="app">

15、windows phone 点击无高光

<meta name="msapplication-tap-highlight" content="no">

除了meta，还可以设置link

这个apple-touch-icon属性是苹果设备的特有属性，用于在将当前网页添加到桌面快捷方式的时候显示的图标。图标只有在使用的时候才会下载。当不设置这个link时，ios设备的safari浏览器回去网页的根目录下寻找这个文件，当没有时会使用网页的快照作为图标。生成的图标默认是带有圆角和高亮的，如果不需要的话，在设置link时需要将apple-touch-icon替换为apple-touch-icon-precomposed。在寻找图标的时候，不同分辨率的设备拥有不同的图标推荐尺寸，有相等尺寸的则选择相等的，没有则选择比大的最近的尺寸，如果没有再匹配其他相近的尺寸。如果符合尺寸的图标不止一个，则优选带有precomposed关键字的图标。选择的顺序如下：

apple-touch-icon-57×57-precomposed.png
apple-touch-icon-57×57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

Retina设备的图标大小是普通设备的两倍，因此也不用指定4套不同的图标，而只需要制作Retina的便可，ios设备会自动缩放。但是还是设置四个link,只是在指定href属性时让他们只想相同的文件便可，常用的尺寸有57*57，72*72，114*114，144*144.更多尺寸请参照

<link rel="apple-touch-icon" href="apple-icon-iphone.png"><link rel="apple-touch-icon" href="apple-icon-ipad.png" size="72*72"><link rel="apple-touch-icon" href="apple-icon-iphone-retina.png" size="120*120"><link rel="apple-touch-icon" href="apple-icon-ipad-retina.png" size="150*150">

来一个稍全的HTML

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta charset="UTF-8" />    <meta name="renderer" content="webkit" />    <meta http-equiv="X-UA-Compatible" content="IE=EDGE, chrome=1">      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <meta name="apple-mobile-web-app-capable" content="yes" />    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />    <meta name="msapplication-tap-highlight" content="no" />    <meta name="format-detection" content="telephone=no" />      <title>Document</title>    <link rel="apple-touch-icon" href="apple-icon-iphone.png">    <link rel="apple-touch-icon" href="apple-icon-ipad.png" size="72*72">    <link rel="apple-touch-icon" href="apple-icon-iphone-retina.png" size="120*120">    <link rel="apple-touch-icon" href="apple-icon-ipad-retina.png" size="150*150"></head><body></body></html>

写好结构了，自然应该写样式了

对于样式，为了完美适配各分辨率的设备，应该使用CSS3的媒体查询，在不同分辨率下，应用不同的样式。更多媒体查询..

@media screen and (min-width：240px) {    html,body,button,input,select,textarea {        font-size: 9px;    }}@media screen and (min-width：320px) {    html,body,button,input,select,textarea {        font-size: 12px;    }}@media screen and (min-width：380px) {    html,body,button,input,select,textarea {        font-size: 12px;    }}@media screen and (min-width：420px) {    html,body,button,input,select,textarea {        font-size: 16px;    }}@media screen and (min-width：450px) {    html,body,button,input,select,textarea {        font-size: 18px;    }}

这里为什么都是对font-size进行设置呢？这叫要说到移动端开发的所谓响应式的，整个网页要根据网页的大小来动态改变，那就意味着网页中的元素也要根据屏幕的大小来变化，自然对于每一个分辨率的屏幕都做一个样式表也是可以的，但是这样代码的复用率也就无从弹起了，那这时候应该怎样呢？既然屏幕是大小在变，而整个网页的布局都是在按照设计的比例进行变化。说到比例，我们最常用的标准化的比例也就是百分比，在响应式的网页中百分比自然是不可或缺的。在PC端开发的时候已经经常会用到百分比，但是它都是相对于父级元素来讲的，那么父级元素的大小从何而来，无从下手，PC端我们通常靠px固定一个元素，但移动端不行，移动端针对的分辨率太多了，少了可变性。刚才讲到我们应该用比例，比例如C = A : B，比例是先对的，有一个参照，也就是数学中除数和被除数的概念，被除数为B,除数为A,被除数则就是那个参照物，要得到A，只需要知道B，A = B*C。在移动端开发中这个参照B是什么呢，B就是这个html下的font-size。特别强调的是是html下的font-size,但是难道每次都去写几倍几倍于font-size吗？这里，给html的font-size提供了一个表示rem,我们知道行内字体大小的时候常用em，它也是针对于字体大小的，但是em是针对于继承的字体大小，个人理解rem应该是root em 的简写，就是根的意思。所以我们在移动开发的时候就只需要设置html的字体大小，其他全部都可以用rem的倍数表示了，如html的字体大小为12px,元素的width: 2rem就表示元素的宽度为24px;
在浏览器中，默认html的字体大小为16px,也就是说，默认的1rem = 16px。因此看到网上很多这样的写法

html {    font-size: 62.5%;}

这个62.5%怎么来的呢，也就是继承默认。62.5% * 16px = 10px;将1rem规范化为10px;

在PC开发中会引入一个reset的css文件用于归一化样式，但是后来发现reset过于古板和陈旧，现在使用normalize.css。

在网上看到一个值得借鉴的媒体查询的

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}@media only screen and (max-device-width :480px){ }@media only screen and (min-device-width :481px){ }/*6*/@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }/*6+*/@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }/*魅族*/@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }/*mate7*/@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }/*4 4s*/@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }@media screen and (min-width: 320px) and (max-width: 480px) {  }/* 平板之类的宽度 1024 以下设备 */@media only screen and (min-width: 321px) and (max-width: 1024px) {body {background: blue;}}/* PC客户端或大屏幕设备: 1028px 至更大 */@media only screen and (min-width: 1029px) {body {background: green;}}/* 竖屏 */@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}/* 横屏 */@media screen and (orientation:landscape){对应样式}

继续探索请戳…

阅读全文

2 0

移动web开发--Hello world

写好结构了，自然应该写样式了

移动web开发--Hello world