本文交换了我www.gbtags.com文章。

<meta name="format-detection" content="telephone=no email=no" />

1.在meta中取消电话邮箱的识别。

  1. <meta name="apple-touch-fullscreen" content="yes">

2.据说是全屏,可是实际ios7.1无效果,查看了百度的大站点的web站点。都已经移除。

3.如今開始讲我们要用到核心的东西。

3.1首先说的是

  1. <meta name="apple-mobile-web-app-capable" content="yes">

这是让我们加入应用之后,在桌面打开图标的时候能够全屏显示。可是上面的顶部工具栏上会一块黑色区域。

怎样解决?

3.2

  1. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

black-translucent的作用是顶部工具栏,背景透明,字体颜色为白色,当让也有black和white选项,百度是设置为white,我測试中会发现其顶部还是一块黑色,和难看,我測试的版本号是iPhone ios7.1版本号。

3.3当然上面这些操作可能不是每一个人都会去保存下来去做的,假设保存,请记得使用html5的缓冲技术,这个下次再扯,还有保存中用到的图片呢?

  1. <link rel="apple-touch-icon-precomposed" href="http://wap.baidu.com/static/img/webapp/img/icon_114.png">

假设你想做的更加适配性大。能够加入size=“114*114”这样,这里大家要注意我用的是

  1. apple-touch-icon-precomposed

不是

  1. apple-touch-icon

就是的ios7.0之前生成的icon会自己带有一个阴影,所以请注意。

3.4,那用户第一次游览这个网页(web app)中怎样做的跟个native app类似呢?

  1. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

前面部分是对屏幕大小的控制,最基本的是后面

  1. minimal-ui

还有,切记,不要分开content的内容。多个meta使用,会有点小问题,读者自己能够測试。

4.接下来我们聊得是media query技术,非常多同学做适配的使用用到比方

  1. <link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:960px)" href="style.css" />

对于这个,我认为能够看下bootstrap和appcan等做他们的解决方案,做的非常成熟了。

今天我们讲的是ios。当然聊点新的media query 技术,看招:

  1. /*中分辨率屏幕*/
  2. @media (-webkit-min-device-pixl-ratio: 1){
  3. //css代码
  4. }
  5. /*高分辨率屏幕*/
  6. @media (-webkit-min-device-pixl-ratio: 1.5){
  7. //css代码
  8. }
  9. /*超高分辨率屏幕(传说中的Retina屏)*/
  10. @media (-webkit-min-device-pixl-ratio: 2){
  11. //css代码
  12. }
  1. window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
  2. 公式表示就是:window.devicePixelRatio = 物理像素 / dips

举个样例iphone4/4s。他的宽度是320,可是他的分辨率中的宽已经是640,所以是 @media (-webkit-min-device-pixl-ratio: 2)

5.接下来是个题外话。个人看到别人写的,没有測试。

  1. <!-- uc强制竖屏 -->
  2. <meta name="screen-orientation" content="portrait">
  3. <!-- QQ强制竖屏 -->
  4. <meta name="x5-orientation" content="portrait">
  5. <!-- UC强制全屏 -->
  6. <meta name="full-screen" content="yes">
  7. <!-- QQ强制全屏 -->
  8. <meta name="x5-fullscreen" content="true">
  9. <!-- UC应用模式 -->
  10. <meta name="browsermode" content="application">
  11. <!-- QQ应用模式 -->
  12. <meta name="x5-page-mode" content="app">

ok,东西讲完了,附上已经改动好的样式的项目地址(请git下来。假设兴趣改动好了想push跟博主要shh秘钥):

  1. https://code.csdn.net/qazwsx2345/node_activity

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

如何ios中间Safari在开发了类似的native app像全屏webapp的更多相关文章

  1. IOS应用在ios7(iPhone5/iPhone5s)上不能全屏显示

    前言 [IOS应用在iOS7系统或者iPhone5/iPhone5s上不能全屏显示,应用画面上下各有1条黑色,但是在其他系统或者型号的手机上却是正常显示 Paste_Image.png Paste_I ...

  2. iOS Swift WisdomScanKit二维码扫码SDK,自定义全屏拍照SDK,系统相册图片浏览,编辑SDK

    iOS Swift WisdomScanKit 是一款强大的集二维码扫码,自定义全屏拍照,系统相册图片编辑多选和系统相册图片浏览功能于一身的 Framework SDK [1]前言:    今天给大家 ...

  3. ios 使用Safari浏览器跳转打开、唤醒app

    常常使用Safari浏览器浏览网页点击url会唤醒该站点的手机版app 须要在app的project中设置 1.打开project中的myapp-Info.plist文件 2.打开文件里新增URL T ...

  4. Android 开发 Fresco框架点击小图显示全屏大图实现 ZoomableDraweeView

    目标需求 实现一张小图片,被点击后变成一个在整个屏幕上显示的大图片.类似于微信朋友圈的图片. 实现流程 1.Fresco基本初始化 2.下载并且导入ZoomableDraweeView 它是实现大图的 ...

  5. iOS学习之WebView的使用 (主要是下面的全屏半透明实现)

    1.使用UIWebView加载网页 运行XCode 4.3,新建一个Single View Application,命名为WebViewDemo. 2.加载WebView 在ViewControlle ...

  6. 【Bugly安卓开发干货分享】Android APP 快速 Pad 化实现

    项目背景 采用最新版本手机 APP(之后称为 MyApp)代码,实现其 Pad 化,为平板和大屏手机用户提供更好的体验.为实现 MyApp 的 Pad 化工作,需要我们首先来了解一下 MyApp 项目 ...

  7. Native App开发 与Web App开发(原生与web开发优缺点)

    Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...

  8. Safari 前端开发调试 iOS 完美解决方案

    转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05      0个评论    来源:Safari ...

  9. iOS开发系统类功能划分

    0.OC语法基础 CHOCBase Object C语法学习笔记(一) Object C语法学习笔记(二) 1.UI类 自定义控件程序运行流程 setNeedsLayOut和setNeedsDispl ...

随机推荐

  1. hdu4614(线段树+二分)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4614 题意:给定一个区间[0,N-1],初始时每个位置上的数字都是0,可以对其进行以下两种操作: 1. ...

  2. 聊聊高并发(三十八)解析java.util.concurrent各个组件(十四) 理解Executor接口的设计

    JUC包中除了一系列的同步类之外,就是Executor运行框架相关的类.对于一个运行框架来说,能够分为两部分 1. 任务的提交 2. 任务的运行. 这是一个生产者消费者模式,提交任务的操作是生产者,运 ...

  3. Sort方法的扩展

    OC中类方法中仅仅为我们提供了一些降序方法,如今我们自定义方法,实现升序. 1.要求:定义一个Person类,实例变量包含name,age,height,定义几个对象,把这些对象保存在数组中,自定义方 ...

  4. poj Optimal Milking

    Optimal Milking 题目: 有K个机器.C仅仅牛.要求求出最全部牛到各个产奶机的最短距离.给出一个C+K的矩阵,表示各种标号间的距离. 而每一个地方最多有M仅仅牛. 算法分析: 二分+最短 ...

  5. Google Maps Android API v2 (1)- 入门

    才可以开始工作的API,你将需要下载的API,并确保你有一个谷歌地图Android的API V2关键.API和关键是免费提供的. 概观 获得谷歌地图Android的API V2 谷歌地图API密钥 显 ...

  6. datagrid标题头粗体

    //标题头粗体        //$("#R_datagrid .datagrid-header-row td div span").each(function (i, th) { ...

  7. JS判断用户连续输入

    方案1 // // $('#element').donetyping(callback[, timeout=1000]) // Fires callback when a user has finis ...

  8. ODAC配置

    1.安装Oracle11g服务端 2.安装ODAC                   ODTwithODAC121012 3.拷贝Oracle11g服务端:  F:\app\adccTest\pro ...

  9. how to fix the cwm/miui recovery status 2 error

    Frequent issues: --------------------- If you report an issue without a log and/or without details, ...

  10. Java没有源代码的同步集合~

    存档~~~~ Synchronized,volatile,lock 锁定->[就绪队列,阻塞队列] 第一个是jvm等级达到. 与volatile所不同的是,后者不能从工作存储器写回到主存储器. ...