如何ios中间Safari在开发了类似的native app像全屏webapp
2015-09-28 10:36
513 查看
本文交换了我www.gbtags.com文章。
<meta name="format-detection" content="telephone=no email=no" />
1.在meta中取消电话邮箱的识别。
2.据说是全屏,可是实际ios7.1无效果,查看了百度的大站点的web站点。都已经移除。
3.如今開始讲我们要用到核心的东西。
3.1首先说的是
这是让我们加入应用之后,在桌面打开图标的时候能够全屏显示。可是上面的顶部工具栏上会一块黑色区域。
怎样解决?
3.2
black-translucent的作用是顶部工具栏,背景透明,字体颜色为白色,当让也有black和white选项,百度是设置为white,我測试中会发现其顶部还是一块黑色,和难看,我測试的版本号是iPhone ios7.1版本号。
![](http://www.gbtags.com/gb/networks/uploadimgthumb/f344cd8f-d985-4fd6-9e51-eabba266b30c.png)
3.3当然上面这些操作可能不是每一个人都会去保存下来去做的,假设保存,请记得使用html5的缓冲技术,这个下次再扯,还有保存中用到的图片呢?
假设你想做的更加适配性大。能够加入size=“114*114”这样,这里大家要注意我用的是
不是
就是的ios7.0之前生成的icon会自己带有一个阴影,所以请注意。
![](http://www.gbtags.com/gb/networks/uploadimgthumb/dfb48598-5abf-4470-a098-95e0d1028e2d.png)
3.4,那用户第一次游览这个网页(web app)中怎样做的跟个native app类似呢?
前面部分是对屏幕大小的控制,最基本的是后面
还有,切记,不要分开content的内容。多个meta使用,会有点小问题,读者自己能够測试。
![](http://www.gbtags.com/gb/networks/uploadimgthumb/6b08bc15-1452-46fe-b6ab-add76d40a53f.png)
4.接下来我们聊得是media query技术,非常多同学做适配的使用用到比方
对于这个,我认为能够看下bootstrap和appcan等做他们的解决方案,做的非常成熟了。
今天我们讲的是ios。当然聊点新的media query 技术,看招:
举个样例iphone4/4s。他的宽度是320,可是他的分辨率中的宽已经是640,所以是 @media (-webkit-min-device-pixl-ratio: 2)
5.接下来是个题外话。个人看到别人写的,没有測试。
ok,东西讲完了,附上已经改动好的样式的项目地址(请git下来。假设兴趣改动好了想push跟博主要shh秘钥):
<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版本号。
![](http://www.gbtags.com/gb/networks/uploadimgthumb/f344cd8f-d985-4fd6-9e51-eabba266b30c.png)
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会自己带有一个阴影,所以请注意。
![](http://www.gbtags.com/gb/networks/uploadimgthumb/dfb48598-5abf-4470-a098-95e0d1028e2d.png)
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使用,会有点小问题,读者自己能够測试。
![](http://www.gbtags.com/gb/networks/uploadimgthumb/6b08bc15-1452-46fe-b6ab-add76d40a53f.png)
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
相关文章推荐
- 基于CSS3的WEBAPP横向滑动模式演化
- Eclipse+Maven创建webapp项目详解
- 手机WebAPP设计注意事项和解决方法
- 【webapp的优化整理】要做移动前端优化的朋友进来看看吧
- 21个webApp前端开发问题
- webapp开发——jqmobi框架的快速使用
- WEBAPP开发技巧总结
- 服务器执行到这里就停住不动了Initializing Spring root WebApplicationContext
- JCOB分分钟word和excel互转,word和excel转html,webApp的福利
- Caused by: java.lang.NoClassDefFoundError: javax/faces/webapp/FacesServlet
- 新建maven工程
- FisrtWebApp
- HTML5开发Webapp总结
- 从一个servlet跳转到另一个webapp的某个地址处理请求
- Log4j2 与Spring 使用webAppRootKey
- APP,webapp 设计相关资料汇集区
- WebApp中Window.Alert界面改良
- Java获取Webapp下的css、js、image资源
- webappbuilder改变leftpanel的大小
- Eclipse+Maven创建webapp项目