此文章转自我www.gbtags.com的文章。
<meta name="format-detection" content="telephone=no email=no" />
1.在meta中取消电话邮箱的识别。
-
<meta name="apple-touch-fullscreen" content="yes">
2.据说是全屏，但是实际ios7.1无效果，查看了百度的大网站的web站点，都已经移除。
3.现在开始讲我们要用到核心的东西。
3.1首先说的是
-
<meta name="apple-mobile-web-app-capable" content="yes">
这是让我们添加应用之后，在桌面打开图标的时候可以全屏显示，但是上面的顶部工具栏上会一块黑色区域。如何解决？
3.2
-
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
black-translucent的作用是顶部工具栏，背景透明，字体颜色为白色，当让也有black和white选项，百度是设置为white，我测试中会发现其顶部还是一块黑色，和难看，我测试的版本是iPhone ios7.1版本。
3.3当然上面这些操作可能不是每个人都会去保存下来去做的，如果保存，请记得使用html5的缓冲技术，这个下次再扯，还有保存中用到的图片呢？
-
<link rel="apple-touch-icon-precomposed" href="http://wap.baidu.com/static/img/webapp/img/icon_114.png">
如果你想做的更加适配性大，可以添加size=“114*114”这样，这里大家要注意我用的是
-
apple-touch-icon-precomposed
不是
就是的ios7.0之前生成的icon会自己带有一个阴影，所以请注意。
3.4，那用户第一次游览这个网页（web app）中如何做的跟个native app类似呢？
-
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
前面部分是对屏幕大小的控制，最主要的是后面
还有，切记，不要分开content的内容，多个meta使用，会有点小问题，读者自己可以测试。
4.接下来我们聊得是media query技术，很多同学做适配的使用用到比如
-
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:960px)" href="style.css" />
对于这个，我觉得可以看下bootstrap和appcan等做他们的解决方案，做的很成熟了。
今天我们讲的是ios，当然聊点新的media query 技术，看招：
- /*中分辨率屏幕*/
-
@media (-webkit-min-device-pixl-ratio: 1){
-
//css代码
- }
-
- /*高分辨率屏幕*/
-
@media (-webkit-min-device-pixl-ratio: 1.5){
-
//css代码
- }
-
- /*超高分辨率屏幕（传说中的Retina屏）*/
-
@media (-webkit-min-device-pixl-ratio: 2){
-
//css代码
- }
-
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
-
公式表示就是：window.devicePixelRatio = 物理像素 / dips
举个例子iphone4/4s，他的宽度是320，但是他的分辨率中的宽已经是640，所以是 @media (-webkit-min-device-pixl-ratio: 2)
5.接下来是个题外话，个人看到别人写的，没有测试。
- <!-- uc强制竖屏 -->
-
<meta name="screen-orientation" content="portrait">
- <!-- QQ强制竖屏 -->
-
<meta name="x5-orientation" content="portrait">
- <!-- UC强制全屏 -->
-
<meta name="full-screen" content="yes">
- <!-- QQ强制全屏 -->
-
<meta name="x5-fullscreen" content="true">
- <!-- UC应用模式 -->
-
<meta name="browsermode" content="application">
- <!-- QQ应用模式 -->
-
<meta name="x5-page-mode" content="app">
ok，东西讲完了，附上已经修改好的样式的项目地址（请git下来，如果兴趣修改好了想push跟博主要shh秘钥）：
-
https://code.csdn.net/qazwsx2345/node_activity
怎样在ios中的Safari内开发出一款类似native app一样的全屏webapp,布布扣,bubuko.com
怎样在ios中的Safari内开发出一款类似native app一样的全屏webapp
