meta基础知识
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=,minimum-scale=,maximum-scale=,user-scalable=no" />
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ,safari上已看不到效果-->
将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent -->
viewport模板
viewport模板——通用
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=,maximum-scale=,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>标题</title><link rel="stylesheet" href=""></head>
<body>
这里开始内容</body>
</html>
viewport模板– target-densitydpi=device-dpi,android
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致--><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>标题</title><link rel="stylesheet" href=""></head>
<body>
这里开始内容</body>
</html>
参考案例:./payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl
常见问题
移动端如何定义字体font-family
中文字体使用系统默认即可,英文用Helvetica
/* 移动端定义字体的代码*/
body{font-family:Helvetica;}
参考《移动端使用字体的思考》
移动端字体单位font-size选择px还是rem
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
rem配置参考:
html{font-size:10px}***@media
手机移动端资源整合 来自淘豆网m.daumloan.com转载请标明出处.
