Viewport & Media Queries

Viewport

viewport字面意思为视图窗口,在移动 web 开发中使用。表示将设备浏览器宽度虚拟成一个特定的值(或计算得出),这样利于移动 web 站点跨设备显示效果基本一致。

width=device-width

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



@viewport {
width: device-width;
}  

viewport target-densitydpi

现在基本上就不需要target-densitydpi了

target-densitydpi的值有 device-dpi, high-dpi, medium-dpi, low-dpi.

manifest文件

减少请求数,js/css压缩,gzipping,尽量减少DOM操作

在iOS中有两个meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明。

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

Home 界面上的图标

  iOS用rel=”apple-touch-icon”,android 用rel=”apple-touch-icon-precomposed”。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。