如何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
版权声明:本文博主原创文章,博客,未经同意不得转载。
如何ios中间Safari在开发了类似的native app像全屏webapp的更多相关文章
- IOS应用在ios7(iPhone5/iPhone5s)上不能全屏显示
前言 [IOS应用在iOS7系统或者iPhone5/iPhone5s上不能全屏显示,应用画面上下各有1条黑色,但是在其他系统或者型号的手机上却是正常显示 Paste_Image.png Paste_I ...
- iOS Swift WisdomScanKit二维码扫码SDK,自定义全屏拍照SDK,系统相册图片浏览,编辑SDK
iOS Swift WisdomScanKit 是一款强大的集二维码扫码,自定义全屏拍照,系统相册图片编辑多选和系统相册图片浏览功能于一身的 Framework SDK [1]前言: 今天给大家 ...
- ios 使用Safari浏览器跳转打开、唤醒app
常常使用Safari浏览器浏览网页点击url会唤醒该站点的手机版app 须要在app的project中设置 1.打开project中的myapp-Info.plist文件 2.打开文件里新增URL T ...
- Android 开发 Fresco框架点击小图显示全屏大图实现 ZoomableDraweeView
目标需求 实现一张小图片,被点击后变成一个在整个屏幕上显示的大图片.类似于微信朋友圈的图片. 实现流程 1.Fresco基本初始化 2.下载并且导入ZoomableDraweeView 它是实现大图的 ...
- iOS学习之WebView的使用 (主要是下面的全屏半透明实现)
1.使用UIWebView加载网页 运行XCode 4.3,新建一个Single View Application,命名为WebViewDemo. 2.加载WebView 在ViewControlle ...
- 【Bugly安卓开发干货分享】Android APP 快速 Pad 化实现
项目背景 采用最新版本手机 APP(之后称为 MyApp)代码,实现其 Pad 化,为平板和大屏手机用户提供更好的体验.为实现 MyApp 的 Pad 化工作,需要我们首先来了解一下 MyApp 项目 ...
- Native App开发 与Web App开发(原生与web开发优缺点)
Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...
- Safari 前端开发调试 iOS 完美解决方案
转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05 0个评论 来源:Safari ...
- iOS开发系统类功能划分
0.OC语法基础 CHOCBase Object C语法学习笔记(一) Object C语法学习笔记(二) 1.UI类 自定义控件程序运行流程 setNeedsLayOut和setNeedsDispl ...
随机推荐
- hdu4614(线段树+二分)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4614 题意:给定一个区间[0,N-1],初始时每个位置上的数字都是0,可以对其进行以下两种操作: 1. ...
- 聊聊高并发(三十八)解析java.util.concurrent各个组件(十四) 理解Executor接口的设计
JUC包中除了一系列的同步类之外,就是Executor运行框架相关的类.对于一个运行框架来说,能够分为两部分 1. 任务的提交 2. 任务的运行. 这是一个生产者消费者模式,提交任务的操作是生产者,运 ...
- Sort方法的扩展
OC中类方法中仅仅为我们提供了一些降序方法,如今我们自定义方法,实现升序. 1.要求:定义一个Person类,实例变量包含name,age,height,定义几个对象,把这些对象保存在数组中,自定义方 ...
- poj Optimal Milking
Optimal Milking 题目: 有K个机器.C仅仅牛.要求求出最全部牛到各个产奶机的最短距离.给出一个C+K的矩阵,表示各种标号间的距离. 而每一个地方最多有M仅仅牛. 算法分析: 二分+最短 ...
- Google Maps Android API v2 (1)- 入门
才可以开始工作的API,你将需要下载的API,并确保你有一个谷歌地图Android的API V2关键.API和关键是免费提供的. 概观 获得谷歌地图Android的API V2 谷歌地图API密钥 显 ...
- datagrid标题头粗体
//标题头粗体 //$("#R_datagrid .datagrid-header-row td div span").each(function (i, th) { ...
- JS判断用户连续输入
方案1 // // $('#element').donetyping(callback[, timeout=1000]) // Fires callback when a user has finis ...
- ODAC配置
1.安装Oracle11g服务端 2.安装ODAC ODTwithODAC121012 3.拷贝Oracle11g服务端: F:\app\adccTest\pro ...
- how to fix the cwm/miui recovery status 2 error
Frequent issues: --------------------- If you report an issue without a log and/or without details, ...
- Java没有源代码的同步集合~
存档~~~~ Synchronized,volatile,lock 锁定->[就绪队列,阻塞队列] 第一个是jvm等级达到. 与volatile所不同的是,后者不能从工作存储器写回到主存储器. ...