移动端Web资源整合

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端Web资源整合相关的知识,希望对你有一定的参考价值。

meta基础知识

  1. H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 
  2. 忽略将页面中的数字识别为电话号码
    <meta name="format-detection" content="telephone=no" />
  3. 忽略android平台中对邮箱地址的识别
    <meta name="format-detection" content="email=no" />
  4. 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- ios7.0版本以后,safari上已看不到效果 -->
  5. 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 可选default、black、black-translucent -->
  6. viewport模板——通用
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,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="index.css">
    </head>
    <body>
    这里开始内容
    </body>
    
    </html>
  7. viewport模板 – target-densitydpi=device-dpi,android 2.3.5以下版本不支持
    <!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="index.css">
    </head>
    
    <body>
    这里开始内容
    </body>
    
    </html>
    

常见问题

  1. 部分android系统中元素被点击时产生的边框怎么去掉

android用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
  1. winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
    <meta name="msapplication-tap-highlight" content="no">
  2. webkit表单元素的默认外观怎么重置
    .css{-webkit-appearance:none;}
  3. webkit表单输入框placeholder的颜色值能改变么
    input::-webkit-input-placeholder{color:#AAAAAA;}
    input:focus::-webkit-input-placeholder{color:#EEEEEE;}
  4. 禁用 radio 和 checkbox 默认样式
    input[type=radio]::-ms-check,
    input[type=checkbox]::-ms-check
    {
    display: none;
    }
  5. 禁用PC端表单输入框默认清除按钮
    input[type=text]::-ms-clear,
    input[type=tel]::-ms-clear,
    input[type=number]::-ms-clear
    {
    display: none;
    }
  6. 禁止ios和android用户选中文字
    .css{-webkit-user-select:none}
  7. 打电话发短信实现
    <a href="tel:0755-10086">打电话给:0755-10086</a>
    <a href="sms:10086">发短信给: 10086</a>
  8. 写邮件实现
    <a href="mailto:[email protected]">[email protected]</a>
  9. 屏幕旋转的事件和样式
    事件
    window.orientation,取值:正负90表示横屏模式、0和180表现为竖屏模式;
    window.onorientationchange = function(){
    switch(window.orientation){
    case -90:
    case 90:
    alert("横屏:" + window.orientation);
    case 0:
    case 180:
    alert("竖屏:" + window.orientation);
    break;
    }
    }
    样式
    //竖屏时使用的样式
    @media all and (orientation:portrait) {
    .css{}
    }
    
    //横屏时使用的样式
    @media all and (orientation:landscape) {
    .css{}
    }
  10. audio元素和video元素在ios和andriod中无法自动播放
    $(‘html‘).one(‘touchstart‘,function(){
    audio.play()
    })
  11. ios使用-webkit-text-size-adjust禁止调整字体大小
    body{-webkit-text-size-adjust: 100%!important;}
  12. 取消input在ios下,输入的时候英文首字母的默认大写
    <input autocapitalize="off" autocorrect="off" />
  13. android 上去掉语音输入按钮
    input::-webkit-input-speech-button {display: none}
  14. 播放视频不全屏
    <!--
    1.ios7+支持自动播放
    2.支持Airplay的设备(如:音箱、Apple TV)播放
    x-webkit-airplay="true"
    3.播放视频不全屏
    webkit-playsinline="true"
    -->
    <video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

以上是关于移动端Web资源整合的主要内容,如果未能解决你的问题,请参考以下文章

手机移动端WEB资源整合

手机移动端WEB资源整合

手机移动端WEB资源整合

手机移动端WEB资源整合

手机移动端WEB资源整合

手机H5移动端WEB资源整合之meta标签