如何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-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

版权声明：本文博主原创文章，博客，未经同意不得转载。