移动 Web 设计

最新推荐文章于 2022-12-08 21:21:15 发布

weixin_30735391

最新推荐文章于 2022-12-08 21:21:15 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/zhouwanqiu/p/8920567.html

版权

一、字号设置

移动设备上运行的网站或应用程序，像素（px）不能作为尺寸单位，必须使用rem或%作为单位；

默认 1rem=16px

设置方法：

* {font-size:62.5%;}

16px * 62.5%=10px

例如之后当需要使用14px字号时，可设置 font-size:1.4rem; 即可

二、让Web布局更友好的适应于移动设备

　　1.Meta标签：

　　　　name名称包括：

　　　　　　viewport：用来控制浏览器窗口的尺寸及缩放比例；

　　　　　　　　　　width ---设置 layout viewport 的宽度，默认为980，范围为200~10000，使用“device-width”表示设备宽度

　　　　　　　　　　height ---设置layout viewport 的高度，默认值根据宽度及设备屏幕纵横比而定范围为223~10000，这个属性很少使用，使用“device-height”表示设备高度

　　　　　　　　　　initial-scale ---设置页面的初始缩放比例，为一个数字，可以带小数

　　　　　　　　　　maximum-scale ---允许用户的最大缩放值，默认值为1.6，范围为0~10，可以带小数

　　　　　　　　　　minimum-scale ---允许用户的最小缩放值，默认值为0.25，范围为0~10，可以带小数

　　　　　　　　　　user-scalable ---是否允许用户进行缩放，默认值为 yes，设为 no 则不允许缩放

　　　　　　　　　　target-densitydpi ---值可以为一个数值或 high-dpi(高像素密度) 、medium-dpi(中等像素密度)、low-dpi(低像素密度)、device-dpi(设备默认像素密度) 这几个字符串中的一个，该属性为安卓特有，但安卓已经决定要废弃这个属性了，避免使用

　　　　　　mobileOptimized：为Pocket IE设计，用于指定内容的宽度（单位为px）；当此标签存在时，浏览器强制将布局设为单列；

　　　　　　handheldFriendly：限制不应在移动设备上被缩放；该内容在移动设备上的值为true，非移动设备页面值为false；

　　　　　　apple-mobile-web-app-capable：若此标签的content属性为"yes"则Web以全屏模式运行；

　　　　　　apple-mobile-web-app-status-bar-style：全屏模式运行时，可以将移动设备上的状态栏改为"black"或"black-translucent"；

　　　　　　format-detection：此标签用于开关是否自动侦测页面中的电话号码和邮箱；

　　2.Link标签：

　　　　rel包括：

　　　　　　apple-touch-startup-image：启动时显示的启动画面；

　　　　　　apple-touch-icon：当网站被保存至主屏幕时显示的图标；