这两句话的确很有用,有了它,手机访问的时候像样了。

移动终端浏览器默认设置视口的宽度和初始规模。
最近做的一个移动终端的项目,遇到一个默认设置更改的问题。起初非常怀疑是自己的html写的有问题。经过一番页面尺寸的测试之后终于找到问题根源。知道是什么问题就可以找解决的方法了。
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,height=device-height"/>
<meta name="format-detection" content="telephone=no">
在页面的头部文件中加入了以上设定就ok了。以下是找到的有关于这些设定的解析。记录下来避免忘记。
然而这些设定只在移动终端的浏览器中有效,非移动终端浏览器这些设定是无效的。并且要这些浏览器是基于iPhone而来的。初次涉及移动终端的应用,恼人的事情不只这一件呢,呵呵O(∩_∩)O~  然,这件事情最有价值啊!

apple-mobile-web-app-capable

Sets whether a web application runs in full-screen mode.

Syntax
<meta name="apple-mobile-web-app-capable" content="yes">
Discussion

If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.

You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

Availability

Available in iPhone OS 2.1 and later.

Support Level

Apple extension.

apple-mobile-web-app-status-bar-style

Sets the style of the status bar for a web application.

Syntax
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Discussion

This meta tag has no effect unless you first specify full-screen mode as described in “url.”

If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.

Availability

Available in iPhone OS 2.1 and later.

Support Level

Apple extension.

format-detection

Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iPhone.

Syntax
<meta name="format-detection" content="telephone=no">
Discussion

By default, Safari on iPhone detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature.

Availability

Available in iPhone OS 1.0 and later.

Support Level

Apple extension.

viewport

Changes the logical window size used when displaying a page on iPhone.

Syntax
<meta name = "viewport" content = "width = 320,
       initial-scale = 2.3, user-scalable = no">
Discussion

Use the viewport meta key to improve the presentation of your web content on iPhone. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.

For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone-specific web application, you should set the width to the width of the device.

“email” describes the properties supported by the viewport meta key and their default values. When providing multiple properties for the viewport meta key, you should use a comma-delimited list of assignment statements.

When referring to the dimensions of a device, you should use the constants described in “number” instead of hard-coding specific numeric values. For example, use device-width instead of320 for the width, and device-height instead of 480 for the height in portrait orientation.

You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iPhone infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.

For example, to set the viewport width to the width of the device, add this to your HTML file:

<meta name = "viewport" content = "width = device-width">

To set the initial scale to 1.0, add this to your HTML file:

<meta name = "viewport" content = "initial-scale = 1.0">

To set the initial scale and to turn off user scaling, add this to your HTML file:

<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">

Use the Safari on iPhone console to help debug your webpages as described in “Debugging”. The console contains tips to help you choose viewport values—for example, it reminds you to use the constants when referring to the device width and height.

Availability

Available in iPhone OS 1.0 and later.

Support Level

Apple extension.

[转载]移动终端浏览器初始设置apple-mobile-web-app-capable的更多相关文章

  1. 打造离线使用的Mobile Web App

    最近公司举办技术大赛,我和同事一起制作了一个叫做10K Hours的Mobile Web App,可以帮助你通过一万小时的努力,成为某个领域的专家.正好前段时间翻译了一本书<HTML5 Mobi ...

  2. 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

    使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...

  3. [转]60fps on the mobile web

    Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowi ...

  4. [转载]Linux下终端字体颜色设置方法

    原文地址:Linux下终端字体颜色设置方法作者:router 网上类似的文章有很多,但是都是转来转去的,没有经过测试,按照很多文章的方法会造成你设置之后的终端在换行和删除输入字符时终端显示会乱七八糟, ...

  5. js网页判断移动终端浏览器版本信息是安卓还是苹果ios,判断在微信浏览器跳转不同页面,生成二维码

    一个二维码,扫描进入网页,自动识别下载苹果和安卓客户端,判断网页如下,(只有苹果的微信不能自动跳转)所以加个微信判断. <!DOCTYPE html> <html> <h ...

  6. JS判断终端浏览器类型

    根据终端浏览器类型不懂加载不同的JS或CSS文件 <script> var browser = { versions: function () { var u = navigator.us ...

  7. python笔记:#003#PyCharm 的初始设置

    PyCharm 的初始设置(知道) 目标 恢复 PyCharm 的初始设置 第一次启动 PyCharm 新建一个 Python 项目 设置 PyCharm 的字体显示 PyCharm 的升级以及其他 ...

  8. 【转载】ASP.NET MVC设置允许跨域访问

    默认情况下,浏览器端发送Ajax请求一般被禁止跨域访问,如A域名网站访问B域名网站的请求会被终止,在ASP.NET MVC项目中,我们可以配置相应的设置项,允许网站的接口跨域访问,主要需要设置Acce ...

  9. js移动终端浏览器版本

    //当要在不同移动终端浏览器中运行不同的代码时,需要对各个终端浏览器进行判断 //判断浏览器 var browser = { versions: function () { var u = navig ...

随机推荐

  1. CFLAGS/CPPFLAGS/CXXFLAGS in Makefile介绍

    先来看一张关于Makefile中的常见预定义变量. CFLAGS 表示用于 C 编译器的选项,CXXFLAGS 表示用于 C++ 编译器的选项.这两个变量实际上涵盖了编译和汇编两个步骤.大多数程序和库 ...

  2. GO实例3 Slice append打印

    package main import "fmt" func main(){ ]int slice:=array[:] slice[]='a' slice[]='b' s1:=ap ...

  3. dom4j解析xml字符串

    import java.util.Iterator; import java.util.List; import org.dom4j.Document; import org.dom4j.Docume ...

  4. poj3461 Oulipo

    Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, without t ...

  5. usaco5.5-Picture

    离散化计算重叠矩形的周长. 称平行于x轴的边为横边,我们以横边为例,某一矩形中y坐标比较小的横边我们称为始边,另一边我们称为终边.用一条扫描线从下往上扫描,当扫到一条始边的时候,如果这条始边的正下方出 ...

  6. hdu 5391 Zball in Tina Town(打表找规律)

    问题描述 Tina Town 是一个善良友好的地方,这里的每一个人都互相关心. Tina有一个球,它的名字叫zball.zball很神奇,它会每天变大.在第一天的时候,它会变大11倍.在第二天的时候, ...

  7. 合并多个excel工作簿

    合并多个Excel工作簿,会出现电话号码以科学计数法显示,如果想要以字符串方式处理,要按如下完整代码 public static void mergeWorkBook() throws Excepti ...

  8. c/c++ 复习基础要点01-const指针、指针函数 函数指针、new/delete与malloc/free区别与联系

    1.      引用本身是有指针实现的:引用为只读指针 例子: int d=123; int& e=d;    //引用 int * const e=d; //只读指针,e指向d,不可修改e指 ...

  9. XMPP通讯开发-服务器好友获取以及监听状态变化

    在 XMPP通讯开发-好友获取界面设计   我们设计了放QQ的列表功能,这里我们获取我们服务器上的 数据. 这一部分知识我们可以查看smack_3_3_0/smack_3_3_0/documentat ...

  10. 使用代码自定义UIView注意一二三

    文/CoderAO(简书作者)原文链接:http://www.jianshu.com/p/68b383b129f9著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 当一撮样式一样的视图在 ...