移动端web笔记整理

> 移动端字体定义
> 移动端click屏幕产生200-300ms的延迟
> webkit表单元素的默认外观怎么重置
> webkit中placeholder的颜色设置
> 禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
> 禁止ios和android用户选中文字
> 打电话发短信写邮件怎么实现
> fixed(固定定位) bug
> 移动端按钮hover效果模拟
> 重置webkit表单默认样式
> 禁用元素被点击产生的阴影或边框
> iscroll4滚动区域中select,input,textarea元素无法点击的bug修复
> zepto.js中tap使用 e.stopPropagation() 阻止事件冒泡无效

meta基础

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="telephone=no" />

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

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

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>
</head>

<body>
内容
</body>
</html>

问题总结

移动端字体定义

场景描述: 手机系统ios,android等是不支持微软雅黑字体

解决方案一:@font-face定义为微软雅黑字体并存放到web服务器上

@font-face {
        font-family: 'MicrosoftYaHei';
        src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */
        src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */
        url('MicrosoftYaHei.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
        }
        <!-- 缺点：消耗用户的流量，页面的打开速度造成了延迟 -->

解决方案二：手机端无需定义中文字体，使用系统默认，英文字体和数字字体可以使用Helvetica(三种系统都支持)

body{font-family:Helvetica;}
        <!-- 缺点:自然是字体上就不能保证和设计图字体一直 -->

移动端click屏幕产生200-300ms的延迟

解决方案：
(1)fastclick.js
(2)zepto的tap事件也是为了解决click的延迟问题

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

-webkit-appearance:none;

webkit中placeholder的颜色设置

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

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

-webkit-touch-callout: none;

禁止ios和android用户选中文字

-webkit-user-select:none;

打电话发短信写邮件怎么实现

<!-- 打电话 -->
<a href="tel:13127995008">打电话给:13127995008</a>
<!-- 发短信  winphone系统无效-->
<a href="sms:13127995008">发短信给: 13127995008</a>
<!-- 写邮件 -->
<a href="mailto:zyz@qq.com">zyz@qq.com</a>

fixed(固定定位) bug

场景描述：
    (1)ios下fixed元素容易出现错位，软件盘弹出时，影响fixed元素定位
    (2)android 下fixed表现要比ios好点,软件盘弹出时,不会影响fixed元素定位
    (3)ios4下不支持position：fixed

解决方案：可用iscroll.js

移动端按钮hover效果模拟

<!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">
.btn_black{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #000;}
.btn_black_hover{background-color: #555;}
</style>
</head>
<body>
<div class="btn_black">按钮</div>
<script type="text/javascript">
   var btnBlue = document.querySelector(".btn_black");
   btnBlue.ontouchstart = function(){
   this.className = "btn_black btn_black_hover";
}
   btnBlue.ontouchend = function(){
   this.className = "btn_black";
}
</script>
</body>
</html>

重置webkit表单默认样式

-webkit-appearance:none;

禁用元素被点击产生的阴影或边框

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

iscroll4滚动区域中select,input,textarea元素无法点击的bug修复

原因：iScroll4要监听整个页面事件,为了达到最优效果，它默认禁用了所有元素的默认事件(a标签除外),造成这些表单元素点击没有反应，无法正常聚焦

解决方案1：
在iScroll.js中找到：onBeforeScrollStart : function(e){ e.preventDefault(); }

替换为：onBeforeScrollStart : function(e){var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase() : ”);if(nodeType != ‘select’ && nodeType != ‘option’ && nodeType != ‘input’ && nodeType != ‘textarea’){e.preventDefault();}}

上述方案只能让input,textarea可以正常点击，但是对select任然没有效果

解决方案2：
将useTransform：true; //iscorll默认滚动模式是使用transform;

改为useTransform: false; //使用定位方式实现滚动

zepto.js中tap使用 e.stopPropagation() 阻止事件冒泡无效

<div class="li_item">
<span class="mypoto_cur">
</span>
</div>
$('.myphoto_list').delegate('.li_item','tap',function(e){
if(!$(e.target).hasClass("mypoto_cur")){
            ....
//加入一层判断
         }
});