码迷,mamicode.com
首页 > 移动开发 > 详细

Web移动端常见问题

时间:2016-03-30 14:55:32      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

一、按钮点击时出现黑色背景

  解决方法:

.class { -webkit-tap-highlight-color:rgba(0,0,0,0);}
.class { -webkit-appearance: none; -webkit-tap-highlight-color: transparent;}

  

二、iOS中伪类:active失效

  解决方法:

$(function(){
    document.body.addEventListener(‘touchstart‘, function () { }); 
}) 

  

三、移动端常用<meta>标签

<meta content="width=device-width,height=device-height,inital-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">

四、响应式语法

@media screen and (max-width: 320px){
    .class { }
 }
@media screen and (min-width:321px) and (max-width:375px){
    .class { }
}

  

五、屏蔽浏览器滑动翻页

  解决方法

var doc = document.getElementById(‘id‘);
doc.addEventListener(‘touchmove‘, function(event) {
  if(event.target.type == ‘range‘) return;
  event.preventDefault();
})

  

Web移动端常见问题

标签:

原文地址:http://www.cnblogs.com/binlink/p/5336909.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!