前端技术文档和网站数据接口使用指南详情
网站开发中有关html、css、js等前端技术文档和易助科技网网站数据接口使用文档及相关资料下载!

移动端html5页面常见问题汇总

来源:易助科技浏览量:37收藏

以下是移动端h5页面一些常见问题汇总:


1. 防止手机中网页放大和缩小。


这点是最常识,作为手机网站开发者来说应该都知道的,就是设置meta中的viewport还有就是,有些手机网站我们看到如下声明:


<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">


设置了DTD的方式是XHTML的写法,假如我们页面运用的是html5,可以不用设置DTD,直接声明<!DOCTYPE html>。使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。


<metaname="viewport"content="user-scalable=0"/>


但是为了更好的兼容,我们会使用完整的viewport设置。


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


当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。


2.设置Web应用是否以全屏模式运行。


使用apple-mobile-web-app-capable来进行设置。语法:


<meta name="apple-mobile-web-app-capable"content="yes">


说明:如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

3.启动或禁用自动识别页面中的电话号码。


语法:


<meta name="format-detection"content="telephone=no"> 


说明:默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。


4.调用安卓或者ios的拨号功能。


html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。
如下:


<a href="tel:4001000800,1034">400-100-0800 </a>


拨打手机直接如下:


<a href="tel:13912345678">点击拨打 13912345678</a>


5.禁止复制选中文本。


{
  -webkit-user-select:none;
  -moz-user-select:none;
  -khtml-user-select:none;
   user-select:none;
}


6.防止长时间按住页面出现闪退。


{
  -webkit-touch-callout:none;
}


7.iphone及ipad下输入框默认内阴影。


input{
  -webkit-appearance:none;
}


8.ios和android下触摸元素时出现半透明灰色遮罩。


a {
  -webkit-tap-highlight-color:rgba(255,255,255,0)
}


设置alpha值为0就可以去除半透明灰色遮罩。

备注:transparent的属性值在android下无效。


9.防止圆角bug。


某些Android手机圆角失效

background-clip: padding-box;


10.设置缓存。


<metahttp-equiv="Cache-Control"content="no-cache"/> 


手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。


11.取消移动端点击300ms延迟。


300ms尚可接受,不过因为300ms产生的问题,我们必须要解决。300ms导致用户体验并不是很好,解决这个问题,我们一般在移动端用tap事件来取代click事件。


$("#haorooms").on("touchend",function(event) {
  event.preventDefault();
});


12.解决移动端 HTML5 audio autoplay 失效问题。


由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。
解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。
解决代码:


document.addEventListener('touchstart',function() {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});


13.JS判别微信自带浏览器。


function isWeixin(){
  var ua = navigator.userAgent.toLowerCase();
 if(ua.match(/MicroMessenger/i)=='micromessenger'){
    return true;
  }else{
    return false;
  }
}


14.JS判断手机设备。


function browserRedirect() {
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  var bIsMidp = sUserAgent.match(/midp/i) == "midp";
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  var bIsAndroid = sUserAgent.match(/android/i) == "android";
  var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
  document.writeln("您的浏览设备为:");
  if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
  document.writeln("phone");
  } else {
    document.writeln("pc");
  }
}


15.微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整


//以下代码可使Android机页面不再受用户字体缩放强制改变大小,但是会有1S左右延时,期间可以考虑loading来处理
if (typeof(WeixinJSBridge) == "undefined") {
  document.addEventListener("WeixinJSBridgeReady", function (e) {
    setTimeout(function(){
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
      alert(JSON.stringify(res));
    })
  }, 0)
    });
}else{  
  setTimeout(function(){
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
      alert(JSON.stringify(res));
    })
  }, 0)   
}
//IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小
body { -webkit-text-size-adjust:100%!important; }


16.屏幕旋转的事件和样式。


//JS处理
function orientInit(){
 var orientChk = document.documentElement.clientWidth >         document.documentElement.clientHeight?'landscape':'portrait';
 if(orientChk =='lapdscape'){
  //这里是横屏下需要执行的事件
 }else{
  //这里是竖屏下需要执行的事件
 }
}
 
orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
 setTimeout(orientInit, 100);
},false)    
 
//CSS处理
<style>
//竖屏时样式
@media all and (orientation:portrait){   }

//横屏时样式
@media all and (orientation:landscape){   }
</style>


17.CSS样式


//禁止长按链接与图片弹出菜单
a,img { -webkit-touch-callout: none }  


// 禁止ios和android用户选中文字
html,body {-webkit-user-select:none; user-select: none; }
 
// 改变输入框placeholder的颜色值
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }


18、空白页基本meta标签


<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent ) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />