webapp 移动端开发

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

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,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" /> <!-- ios7.0版本以后，safari上已看不到效果 -->

　将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent -->

　移动端如何定义字体font-family

body{font-family:Helvetica;}中文字体使用系统默认即可，英文用Helvetica

　ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

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

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)-webkit-user-modify:read-write-plaintext-only; }

　winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

<meta name="msapplication-tap-highlight" content="no">

　webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}

　webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;}

　禁用 select 默认下拉箭头

select::-ms-expand {display: none;}

　禁用 radio 和 checkbox 默认样式

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}

　禁用PC端表单输入框默认清除按钮

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display: none;}

　禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

　禁止ios和android用户选中文字

.css{-webkit-user-select:none}

　打电话

<a href="tel:0755-10086">打电话给:0755-10086</a>

　发短信，winphone系统无效

<a href="sms:10086">发短信给: 10086</a>

　屏幕旋转的事件和样式 window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式； js

window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("横屏:" + window.orientation); case 0: case 180: alert("竖屏:" + window.orientation); break; } }

　屏幕旋转的事件和样式 window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式； css3

//竖屏时使用的样式 @media all and (orientation:portrait) { .css{} } //横屏时使用的样式 @media all and (orientation:landscape) { .css{} }

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

$('html').one('touchstart',function(){ audio.play() })

　摇一摇功能

HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

　手机拍照和上传图片

<!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*"> <!-- ios 有拍照、录像、选取本地图片功能 ?? 部分android只有选取本地图片功能 ?? winphone不支持 ?? input控件默认外观丑陋-->

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

body{-webkit-text-size-adjust: 100%!important;}

　消除transition闪屏

.css{

/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-transform-style: preserve-3d;

/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ -webkit-backface-visibility: hidden;

}

　开启硬件加速

.css {

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

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

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

　android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

　如何阻止windows Phone的默认触摸事件

html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

　要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名

<!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">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
</style>
</head>
<body>
<div class="btn-blue">按钮</div>
<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
    this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
    this.className = "btn-blue"
}
</script>
</body>
</html>

　模拟按钮hover效果

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下，兼容性ios5+、部分android 4+、winphone 8　

<!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"> 
<style type="text/css">
 a { -webkit-tap-highlight-color: rgba(0,0,0,0); }
 .btn-blue { display: block; height: 42px; line-height: 42px; text-align: center; border-radius: 4px; font-size: 18px; color: #FFFFFF; background-color: #4185F3; } 
.btn-blue:active { background-color: #357AE8; } 
</style> 
</head> 
<body> 
<div class="btn-blue">按钮</div> 
<script type="text/javascript"> document.addEventListener("touchstart", function(){}, true) 
</script> 
</body> 
</html>

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

html {font-size:10px}
  @media screen and (min-width:480px) and (max-width:639px) {
  html {
  font-size: 15px
  }
  }
  @media screen and (min-width:640px) and (max-width:719px) {
  html {
  font-size: 20px
  }
  }
  @media screen and (min-width:720px) and (max-width:749px) {
  html {
  font-size: 22.5px
  }
  }
  @media screen and (min-width:750px) and (max-width:799px) {
  html {
  font-size: 23.5px
  }
  }
  @media screen and (min-width:800px) and (max-width:959px) {
  html {
  font-size: 25px
  }
  }
  @media screen and (min-width:960px) and (max-width:1079px) {
  html {
  font-size: 30px
  }
  }
  @media screen and (min-width:1080px) {
  html {
  font-size: 32px
  }
  }

posted @ 2015-07-08 14:11 oksite 阅读(411) 评论(0) 收藏举报

刷新页面返回顶部