- 1、添加viewport标签
- 2、禁止将数字变为电话号码
- 3、iphone设备中的safari私有meta标签
- 4、iphone的私有标签
- 5、如何启动或禁用自动识别页面中的电话号码
- 6、h5网站input设置为type=number的问题
- 7、select下拉选择设置问题
- 8、移动端click事件延迟的问题
- 9、移动端HTML5 audio autoplay失效问题
- 10、CSS动画页面闪白,动画卡顿,图片错乱的问题
- 11.定位的坑
- 12、audio元素和video元素在ios和andriod中播放问题
- 13、防止长按页面元素被选中
- 14、html5碰到上下拉动滚动条时卡顿/慢怎么解决
- 15、点击元素产生背景或边框怎么去掉
- 16、ios对时间date()的支持不一样
- 17、iOS系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格的问题
- 18、某些情况下非可点击元素如(label,span)监听click事件,ios下不会触发
- 19、微信二维码问题
1、添加viewport标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
详细属性：
width —— viewport的宽度（width=device-width意思是：宽度等于设备宽度）
height ——— viewport的高度（height=device-height意思是：高度等于设备宽度）
initial-scale ——- 初始的缩放比例
minimum-scale ——- 允许用户缩放到的最小比例
maximum-scale ——- 允许用户缩放到的最大比例
user-scalable ——- 用户是否可以手动缩放
强制750px方案
(function () {var phoneWidth = parseInt(window.screen.width);var phoneScale = phoneWidth / 750;var ua = navigator.userAgent;if (/Android (\d+.\d+)/.test(ua)) {var version = parseFloat(RegExp.$1);if (version > 2.3) {// andriod 2.3以上document.write('');} else {// andriod 2.3document.write('');}// IOS及其他系统} else {document.write('');}})();
2、禁止将数字变为电话号码
<meta name="format-detection" content="telephone=no" />
一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，取消这个很有必要
3、iphone设备中的safari私有meta标签
<meta name="apple-mobile-web-app-capable" content="yes" />
4、iphone的私有标签
<meta name="apple-mobile-web-app-status-bar-style" content="black">
指定的iphone中safari顶端的状态条的样式
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）
另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为自己定义的图标
5、如何启动或禁用自动识别页面中的电话号码
html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了
<a href="tel:10010">10010</a>
format-detection可以启动或禁用自动识别页面中的电话号码;语法:
<meta name="format-detection" content="telephone=no"> //默认情况下设备会自动识别任何可能是电话号码的字符串,设置telephone=no可以禁用这项功能,设置不识别邮箱和地址也同理
6、h5网站input设置为type=number的问题
h5网页input的type设置为number一般会产生三个问题:
问题1:maxlength属性不好用
解决
<input type="number" oninput="checkTextLength(this ,10)"><script type="text/javascript">function checkTextLength(obj, length) {if(obj.value.length > length) {obj.value = obj.value.substr(0, length);}}</script>
问题2:form提交的时候默认取整
因为form提交默认做了表单验证,step默认是1,要设置step属性,假如保留2位小数,写法如下:
<input type="number" step="0.01" /> //input中type=number一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step;number中默认step是1,也就是step=0.01可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01;step和min一起使用时数值必须在min和max之间
问题3:部分安卓手机出现样式问题
去除input中这些默认样式:
input[type=number] {-moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0;}
去除input默认样式的方法:
input,textarea {border: 0;-webkit-appearance: none; //可同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现,加了此属性后,iOS下默认还是有圆角的,不过可以用border-radius属性修改}
7、select下拉选择设置问题
问题1:右对齐实现
设置如下属性
select option {direction: rtl;}
问题2:唤起select的option展开
function showDropdown(sltElement) {var event;event = document.createEvent('MouseEvents');event.initMouseEvent('mousedown', true, true, window);sltElement.dispatchEvent(event);};
问题3:禁用select默认箭头
::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰
select::-ms-expand { display:none; }
问题4:使用appearance改变webkit浏览器的默认外观
input,select { -webkit-appearance:none; appearance: none; }
8、移动端click事件延迟的问题
移动端的点击事件都会有300ms延迟,是因为浏览器在等待你是否执行双击,但此延迟导致用户体验不好,解决方案：
1.尽量都使用touch事件来替换click事件,例如用touchend事件(推荐)
2.用preventDefault阻止a标签的click
3.用script标签引入fastclick库去除延迟,实验证明fastclick比tap要快
4.zepto的touch模块,tap事件也是可以解决在click的延迟问题
5.延迟一定的时间(300ms+)来处理事件(不推荐)
6.以上一般都能解决,实在不行就换成click事件
7.触摸事件的响应顺序为touchstart—>touchmove—>touchend—>click,也可以通过绑定ontouchstart事件,加快对事件的响应,解决300ms延迟问题
8.若移动设备兼容性正常的话(IE/Firefox/Safari(IOS 9.3)及以上)只需加上下面meta标签即可把viewport设置成设备的实际像素,就不会有300ms的延迟
<meta name="viewport" content="width=device-width">
click事件的延迟会导致移动端点透问题
案例如下:
<div id="haorooms">事件测试</div><a href="#">www.xxx.com</a>
div是绝对定位的蒙层且z-index高于a,我们给div绑定tap事件：
$('#haorooms').on('tap',function(){$('#haorooms').hide();});
我们点击蒙层时div正常消失,但是当我们在a标签上点击蒙层时,发现a链接被触发,这就是所谓的点透事件
原因:touchstart早于touchend早于click,即click的触发是有300ms左右延迟的,也就是说tap触发之后蒙层隐藏click没有触发,300ms之后由于蒙层消失click触发到了下面的a链接上;解决方案同上面的click事件延迟
9、移动端HTML5 audio autoplay失效问题
由于自动播放网页中的音频或视频会给用户带来困扰或不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发才播放;解决方法思路:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了;解决代码:
document.addEventListener('touchstart', function () {document.getElementsByTagName('audio')[0].play();document.getElementsByTagName('audio')[0].pause();});
10、CSS动画页面闪白,动画卡顿,图片错乱的问题
解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); //可以触发硬件加速,从而让浏览器在渲染动画时从CPU转向GPU
目前像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速,当检测到某个DOM元素应用了某些CSS规则时就会自动开启,从而解决页面闪白,保证动画流畅
3.各种应用的webview(例如微信)在遇到有大量图片时会出现img和background-image互相错乱的情况,6和6plus更为严重,目前暂时的解决方法也是动态给所有用到图片的元素加上-webkit-transform:translate3d(0,0,0)
4.页面中的滑动刷新在某些手机中出现卡顿滑不动的情况,以下给出可行的解决方案:
a.关闭probeType属性(传说是因为这个启用监听滚动状态的很耗性能,关闭这个属性滑动就会流畅很多)
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
b.给scroll元素增加css样式:-webkit-transform:translate3d(0,0,0);
11.定位的坑
1.fixed定位
ios下fixed元素容易定位出错,软键盘弹出时影响fixed元素定位,而android下不会;ios4下不支持position:fixed
解决方案:使用[Iscroll],如：
<div id="wrapper"><ul><li></li>.....</ul></div><script src="iscroll.js"></script><script>var myscroll;function loaded(){myscroll=new iScroll("wrapper");}window.addEventListener("DOMContentLoaded",loaded,false);</script>
2.position定位
Android下弹出软键盘弹出时影响absolute元素定位;解决方案如下:
var ua = navigator.userAgent.indexOf('Android');if(ua>-1){$('.ipt').on('focus', function(){$('.css').css({'visibility':'hidden'})}).on('blur', function(){$('.css').css({'visibility':'visible'})})}
3.安卓手机端软键盘弹出顶起页面布局
BODY被顶起的解决办法：
$('body').height($('body')[0].clientHeight);
12、audio元素和video元素在ios和andriod中播放问题
问题1:音频/视频写法
<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>
问题2:ios系统手机无法自动播放音频/视频
这个是苹果系统限制默认不允许自动播放音频/视频,需要点一下触发play()事件才能播放;可以在页面onload后触发播放事件:
document.getElementById('music').play();
到这里一般都可以播放音乐了,如果还不行很有可能是微信的限制
问题3:微信的限制
如果是微信的限制,这时需要调用微信接口,页面先引入:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
然后JS写入微信事件:
document.addEventListener("WeixinJSBridgeReady", function() {document.getElementById('music').play();}, false);
1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常
2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间
问题4:Safari浏览器自动播放
document.addEventListener('touchstart', function(){audio.play();}, false);
问题5:ios系统不支持动画暂停样式(animation-play-state)
H5页面一般都会有BGM,也会提供一个旋转的音乐图标供用户开启关闭音乐;希望当用户点击音乐按钮时图标停止旋转,再点图标顺着之前停止的位置继续跑动画;animation-play-state是最简便的方式,然而ios不支持,目前的解决方案是:音乐图标负责跑动画,图标父级元素负责记录停止时的转动值问题
6:ios系统摇一摇播放音效事件无效
在实现摇晃(引用了封装好的shake.js)手机触发某一音效这个需求时,发现在微信中音效没有被触发;后面找到原因:在ios里并没有把自定义摇晃事件shake当成交互动作,而要播放音效需要用户有交互动作;没有交互音效就没被加载,那么我们先加载音效,结合上面的微信接口:
document.addEventListener("WeixinJSBridgeReady", function () {shakeMusic.load();}, false);
13、防止长按页面元素被选中
解决:加入样式可禁止用户进行复制,ios和一般的安卓都可以解决,唯独小米自带浏览器还有问题
-webkit-touch-callout:none; //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口-webkit-user-select:none; //webkit浏览器-khtml-user-select:none; //早期浏览器-moz-user-select:none; //火狐-ms-user-select:none; //IE10user-select:none;
添加完这段代码后在IOS上会有问题,这时发现input框无法正在输入内容了;造成这个原因是-webkit-user-select:none;这个属性,解决方法就是在css文件中同时设置一下input的属性
input {-webkit-user-select:auto; //webkit浏览器 all}
14、html5碰到上下拉动滚动条时卡顿/慢怎么解决
body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}
overflow-x:auto在iOS有兼容问题，解决方法:
-webkit-overflow-scrolling: touch;
15、点击元素产生背景或边框怎么去掉
ios用户点击一个链接会出现一个半透明灰色遮罩,如果想要禁用可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩
android用户点击一个链接会出现一个边框或者半透明灰色遮罩,不同生产商定义出来效果不一样,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
特殊说明:有些机型去除不了,如小米2,对于按钮类还有个办法,不使用a或input标签,直接用div标签
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符}或a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);}
16、ios对时间date()的支持不一样
var date =new Date("2016-05-31 00:00:00");
这种写法在安卓和pc上都正常的,唯独在ios手机上会显示NAN,ios上只支持格式:
var date =new Date("2016/05/31");
调试发现2016/05/31等同2016-05-31 00:00:00,也就是说ios默认就是从0开始计算的,我们不需要设置后面的时分秒为00:00:00
17、iOS系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格的问题
可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');
18、某些情况下非可点击元素如(label,span)监听click事件,ios下不会触发
针对此种情况只需对不触发click事件的元素添加一行css代码即可
cursor: pointer;
19、微信二维码问题
1.同一个页面里要是有两个二维码，长按扫描总是只能扫出左侧/第一个二维码
解决:可视区域内只能出现一个二维码
两（多）张两张二维码无法在同一屏幕视窗中共存可以对二维码监听 touchstart，将所有其它二维码都换成当前 的二维码
HTML
<div class="qrcodeBox clearfix"><img src="1.png" class="qrcode qrcode1 fl" /><img src="2.png" class="qrcode qrcode2 fl" /><img src="2.png" class="realQrcode" /></div>
CSS
.qrcodeBox {width: 875px;margin: 40px auto;z-index: 2;height: 2000px;background: white;}.qrcode {position: relative;z-index: 2;width: 335px;margin: 0 50px;}.realQrcode {width: 100%;position: fixed;opacity: 0.01;z-index: -1;left: 0;top: 0;}
JS
$(function(){qrcode();})function qrcode() {$(document).on('touchstart', '.qrcode1', function () {$('.realQrcode').attr('src', $(this).attr('src'));$('.realQrcode').css('z-index', '10');}).on('touchstart', '.qrcode2', function () {$('.realQrcode').attr('src', $(this).attr('src'));$('.realQrcode').css('z-index', '10');}).on('touchend', '.qrcode', function () {$('.realQrcode').css('z-index', '-1');}).on('touchcancel', '.qrcode', function () {$('.realQrcode').css('z-index', '-1');}
2.使用meta标签缩放页面后长按二维码图片无反应
解决:使用以下代码后就能长按识别二维码了~
//同一张二维码图片<img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute;" src="二维码图片地址"> //这张opacity为0隐藏起来,但实际存在且宽为100%,屏幕有多大就多大<img src="二维码图片地址" title="qrcode" alt="qrcode"> //这张是呈现给用户看的
二维码图片不要写为背景,不然长按没办法触发扫描功能,应使用img标签引入;有时扫描二维码后会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如App的下载页面等,因此二维码的扫描测试不能少;举例:如果二维码扫描结果是应用的下载地址的,可以使用应用宝的微下载地址生成二维码,这就不会被”温馨提醒”了
若有收获，就点个赞吧
0 人点赞
