移动端页面需要了解的知识

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

以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame,作用是在使用ie浏览器解析页面时,有时候会使用IE7兼容模式解析页面,设置这个是强制使用高版本IE解析页面。参考 http://www.tuicool.com/articles/ra6Fjuj


2,<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport 翻译:视口,这里指我们的设备大小。在设备上设置原始大小显示和是否缩放申明
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以手动调整缩放比例

其实还可以通过viewport 把自己冒充成更宽的屏幕
参考:移动前端开发viewport的深入理解 http://www.cnblogs.com/2050/p/3877280.html


3,<meta name="format-detection"content="telephone=no">
format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置:
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以连写:meta name="format-detection" content="telephone=no,email=no,adress=no"
下面具体说下每个设置的作用:
一、telephone
你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:
telephone=no就禁止了把数字转化为拨号链接!
telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!
二、email
告诉设备不识别邮箱,点击之后不自动发送
email=no禁止作为邮箱地址!
email=yes就开启了把文字默认为邮箱地址,这个meta就不用写了,在默认是情况下就是开启!
三、adress
adress=no禁止跳转至地图!
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!
参考:meta标签中的format-detection属性及含义 http://blog.sina.com.cn/s/blog_51048da70101cgea.html

4,<meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。


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

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />

建议用苹果手机测试下
 作用是控制状态栏显示样式
status-bar-style:black

status-bar-style:black-translucent

以上两个都可参考: http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html

6,<link rel="dns-prefetch" href="//网址">
DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验。
在某些现代浏览器 ( Google Chrome, Firefox 3.5+ ) 中, 已经能够支持DNS的预取了, 怎么个预取呢? 就是在浏览器加载网页时, 对网页中的<link>或者<a>的href属性中的域名进行后台的预解析(上文中的 1- 5步), 并且将解析结果缓存在浏览器端, 当用户在真正点击链接时, 省去在当下的DNS解析消耗, 把这个消耗过程转嫁到用户无法感知的浏览过程中去.
参考:

什么是DNS Prefetch? http://www.liqwei.com/program/other/2014/909.shtml
网站优化应重视DNS预获取 http://dbanotes.net/web/dns_prefetching.html
DNS优化的原理和方法 http://www.blueidea.com/tech/site/2011/8697.asp
浏览器DNS 预取读技术的危害 (禁用DNS 预读取能节省每月100亿的DNS查询) http://www.cnblogs.com/dodohua/archive/2011/03/10/1980110.html

7,<link rel="apple-touch-icon" href="/xxx_icon.png"/>
现今移动设备越来越多,苹果为iOS设备配备了apple-touch-icon私有属性,添加该属性,在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上,方便用户以后访问,个人理解就是添加手机桌面快捷方式
参考:

关于Apple设备私有的apple-touch-icon属性详解 http://blog.csdn.net/freshlover/article/details/9310437
WebApp之 apple-touch-icon http://blog.sina.com.cn/s/blog_5a073f0f01014jfc.html

如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]

如果您想转载本博客,请注明出处

如果您对本文有意见或者建议,欢迎留言

感谢您的阅读,请关注我的后续博客

原文地址:https://www.cnblogs.com/geek12/p/4385026.html