H5项目常见问题汇总及解决方案

2016-11-29 本文已影响169人 _米黎

Meta基础知识：

H5页面窗口自动调整到设备宽度，并禁止用户缩放界面

一、HTML页面结构

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

width ：设置viewport宽度，是一个正整数或字符串“device-width”；
height：设置viewport高度，一般设置了宽度会自动解析出高度，可以不用设置；
initial-scale：默认缩放比例，为一个数字，可以带小数；
minimum-scale：允许用户最小缩放比例，为一个数字，可以带小数；
maximum-scale：允许用户最大缩放比例，为一个数字，可以带小数；
user-scalable：是否允许用户手动缩放；

二、JS动态判断

var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
    var version = parseFloat(RegExp.$1);
    if(version>2.3){
        document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
    }else{
        document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
    }
} else {
    document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}```

- #####空白页基本meta标签

- #####其他meta标签

##常见问题：
- #####移动端如何定义字体font-family
@ --------------------------------------中文字体的英文名称
@ 宋体      SimSun
@ 黑体      SimHei
@ 微信雅黑   Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体    NSimSun
@ 新细明体  MingLiU
@ 细明体    MingLiU
@ 标楷体    DFKai-SB
@ 仿宋     FangSong
@ 楷体     KaiTi
@ 仿宋_GB2312  FangSong_GB2312
@ 楷体_GB2312  KaiTi_GB2312  
@
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

- #####打电话发短信怎么实现
1 . 打电话
`<a href="tel:10086">打电话给:10086</a>`
2 . 发短信
`<a href="sms:10086">发短信给: 10086</a>`
3 . 写邮件

//注：在添加这些功能时，第一个功能以"?"开头，后面的以"&"开头
//1.普通邮件
<a href="mailto:mhb7724@qq.com">点击我发邮件</a>
//2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
<a href="mailto:mhb7724@qq.com?cc=mi.haibo@trs.com.cn">点击我发邮件</a>
//3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
<a href="mailto:mhb7724@qq.com?cc=mi.haibo@trs.com.cn&bcc=18510225441@163.com">点击我发邮件</a>
//4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
<a href="mailto:mhb7724@qq.com;18510225441@163.com">点击我发邮件</a>
//5.包含主题，用?subject=
<a href="mailto:mhb7724@qq.com?subject=邮件主题">点击我发邮件</a>
//6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行
<a href="mailto:mhb7724@qq.com?body=邮件主题内容%0A腾讯%0A腾讯">点击我发邮件</a>
//7.内容包含链接，含http(s)://等的文本自动转化为链接
<a href="mailto:mhb7724@qq.com?body=http://www.baidu.com">点击我发邮件</a>
//8.内容包含图片（PC不支持）
<a href="mailto:mhb7724@qq.com?body=

">点击我发邮件</a>
//9.完整示例
<a href="mailto:mhb7724@qq.com ;mi.haibo@trs.com.cn?cc=0406@yeah.net &bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯%0A%0Ahttp://www.baidu.com%0A%0A

">点击我发邮件</a>

H5项目常见问题汇总及解决方案

Meta基础知识：

H5页面窗口自动调整到设备宽度，并禁止用户缩放界面

猜你喜欢

热点阅读