H5移动端常见问题

h5 常见问题

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

一、HTML 页面结构
// width    设置 viewport 宽度，为一个正整数，或字符串 'device-width'
// height   设置 viewport 高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale    默认缩放比例，为一个数字，可以带小数
// minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable    是否允许手动缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

二、JS 动态判断
var phoneWidth =  parseInt(window.screen.width);
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">');
}

2. 移动端如何定义字体 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; }

3. 移动端字体单位font-size选择px还是rem

// 如需适配多种移动设备，建议使用rem。以下为参考值(浏览器默认字号为16px)：
html {
    font-size: 62.5%; }   //10/16 = 62.5%
//设置12px字体   这里注意在rem前要加上对应的px值，解决不支持rem的浏览器的兼容问题，做到优雅降级
body {
    font-size:12px; font-size:1.2rem; }  

4. 取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

5. 手机拍照和上传图片

//IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持
<input type="file" accept="images/*" />
<input type="file" accept="video/*" />

6. audio元素和video元素在ios和andriod中无法自动播放

//音频，写法一
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>

//音频，写法二
<audio controls="controls">	
	<source src="music/bg.ogg" type="audio/ogg"></source>
	<source src="music/bg.mp3" type="audio/mpeg"></source>
	优先播放音乐bg.ogg，不支持在播放bg.mp3
</audio>

//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
   
	music.play();