html 手机 微信 网页 meta name="viewport" content="width=600" 无效

无效的原因：

手机屏幕宽度小于600px，所以以上代码不会生效，网页内容会按照原网页尺寸比例显示。

解决办法：

修改width=等于手机屏幕显示宽度。

总结：

把 width=XXX这个数值设置小于或者等于手机屏幕的时候，这个设置值一般会失效，而按照缩放等级显示。

推荐：

响应式学习视频免费下载地址：

http://share.bianyun.net/zhanzhang/10945.html

视频里面讲了响应式设计原理、如何做响应式网页,包括此类问题也包含在内,讲的也非常全面。

meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

width - viewport的宽度 height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

在web app应用下状态条（屏幕顶部条）的颜色；

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。

注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方

（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）

height: viewport 的高度 （范围从 223 到 10,000 ）

initial-scale: 初始的缩放比例 （范围从>0到 10 ）

minimum-scale: 允许用户缩放到的最小比例

maximum-scale: 允许用户缩放到的最大比例

user-scalable: 用户是否可以手动缩放

是否删除默认的苹果工具栏和菜单栏

当设置了app形式之后，作用是控制状态栏显示样式，但是本机ios7测试之后没啥改变……不解

iphone会把一串数字识别为电话号码，点击的时候会提示是否呼叫，屏蔽这功能则把telephone设置为no，要启用电话功能，请使用 <a href="tel:13888888888">Call Me : 13888888888</a>来代替，

邮件则为 <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

此外，apple还有两个有趣的标签：

如果 apple-mobile-web-app-capable设置为 yes了，那么在苹果机的safari上可以通过添加到主屏按钮将网站添加到主屏幕上。而设置相应 apple-touch-icon标签，则添加到主屏上的图标就会使用我们指定的图片。

基于 apple-mobile-web-app-capable设置为 yes，可以为WebApp设置一个类似NativeApp的启动画面。和 apple-touch-icon不同， apple-mobile-web-app-capable不支持sizes属性，要使用media来加载不同的启动画面。详细查询 大漠的文章 。

http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html

http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html

http://blog.sina.com.cn/s/blog_3f1fc8950101fz2v.html

---