移动端和PC端在代码书写上有什么区别呢？
下面是基础的HTML模板，使用工具自动生成的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
这段代码，并没有告诉我们移动端开发有什么不同，现在需要加一些东西。
<!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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
我们可以看到，上面就是加了很多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">- 1
2、用来描述是都删除苹果设备默认的工具栏和菜单栏，yes删除，no保留
<meta content="yes" name="apple-mobile-web-app-capable">- 1
3、描述苹果设备的状态栏样式，可选值有black黑色,default默认白色,black-translucent灰色
<meta content="black" name="apple-mobile-web-app-status-bar-style">- 1
4、描述是否将页面上的数字格式化为电话连接，yes为格式化，no为不格式化
<meta content="telephone=no" name="format-detection">- 1
5、描述是否将页面上的文字格式化为电子邮件，yes为格式化，no为不格式化
<meta content="email=no" name="format-detection">- 1
6.描述内核渲染模式，可用于国内的双核浏览器，如搜狗，QQ，360，遨游。可用取值有webkit,ie-comp,
ie-stand。
<meta name="renderer" content="webkit">- 1
7、优先使用最新版本和Chrome，
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />- 1
8、针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name="HandheldFriendly" content="true">- 1
9、微软的老式浏览器
<meta name="MobileOptimized" content="320">- 1
9、uc强制竖屏
<meta name="screen-orientation" content="portrait">- 1
10、QQ强制竖屏
<meta name="x5-orientation" content="portrait">- 1
11、 UC强制全屏
<meta name="full-screen" content="yes">- 1
12、 QQ强制全屏
<meta name="x5-fullscreen" content="true">- 1
13、UC应用模式
<meta name="browsermode" content="application">- 1
14、QQ应用模式
<meta name="x5-page-mode" content="app">- 1
15、windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">- 1
除了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">- 1
- 2
- 3
- 4
来一个稍全的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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
写好结构了，自然应该写样式了
对于样式，为了完美适配各分辨率的设备，应该使用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;
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
这里为什么都是对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,元素的 2rem就表示元素的宽度为24px;
在浏览器中，默认html的字体大小为16px,也就是说，默认的1rem = 16px。因此看到网上很多这样的写法
html {
font-size: 62.5%;
}- 1
- 2
- 3
这个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){对应样式}