您的位置：首页 > 移动开发 > Android开发

正确的手机头部声明（android，iphone）

2016-11-17 21:26 405 查看

<!doctype html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0" />

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

<title>xxxx</title>
</head><body></body>

</html>

这里面有个meta标签很重要，viewport。

1.什么Viewport？

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的Safari浏览器最新引进了viewport这个meta tag，让网页开发者来控制viewport的大小和缩放，其他手机浏览器也基本支持。

Viewport的meta标签

注意在内容之前在HEAD标签内有一个viewport的meta标签设定了浏览器怎样展示页面的缩放等级和范围。如果没有设置的话，许多移动设备的浏览器会使用一个“虚拟的”页面宽度，大约是900PX宽，使得桌面的网站工作的也很好，但是这样屏幕看起来是缩小的而且太宽了。通过设置viewport属性为content="width=device- width, initial-scale=1，会使宽度会被设定为设备的屏幕宽度。

<meta name="viewport" content="width=device-width, initial-scale=1">

这个设置没有没有禁用用户缩放页面的权限，使得可访问性非常好。但是在iOS设备上有一个小问题，就是旋转屏幕的时候，这个viewport的设定没有设置宽度，在将来的版本我们希望能修正。如果有需求的话，你可以设定viewport 的其他的属性来禁用缩放。

2.一般的写法一个常用的针对移动网页优化过的页面的viewport meta标签大致如下：

<meta name = "viewport" content = "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0" / >

width：控制viewport的大小，可以指定的一个值，如果600，或者特殊的值，如device - width为设备的宽度（单位为缩放为100 % 时的CSS的像素）。

height：和width相对应，指定高度。

initial - scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。

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

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

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

3、移动端的meta

<meta name="viewport" content="width=device-width,
initial-scale=1, user-scalable=no"/>

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

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

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

<meta name="viewport" content="width=device-width,
initial-scale=1, user-scalable=no"/>

<meta name="apple-mobile-web-app-capable" content="yes"/><!--删除苹果默认的工具栏和菜单栏-->

<meta name="apple-mobile-web-app-status-bar-style" content="black"/><!--设置苹果工具栏颜色-->

<meta name="format-detection" content="telphone=no,
email=no"/><!--忽略页面中的数字识别为电话，忽略email识别-->

<!--启用360浏览器的极速模式(webkit)-->

<meta name="renderer" content="webkit">

<!--避免IE使用兼容模式-->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->

<meta name="HandheldFriendly" content="true">

<!--微软的老式浏览器-->

<meta name="MobileOptimized" content="320">

<!-- 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">

<!-- windows phone 点击无高光-->

<meta name="msapplication-tap-highlight" content="no">

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航