怎样在ios中的Safari内开发出一款类似native app一样的全屏webapp

此文章转自我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

不是

apple-touch-icon

就是的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">

前面部分是对屏幕大小的控制，最主要的是后面

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