移动端web开发整理

 

/* 移动端定义字体的代码 */
body {
  font-family: "Helvetica Neue", Helvetica;
}

 

ios端触摸时,会出现一个半透明灰色遮罩
  如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0

body{-webkit-tap-highlight-color: rgba(0,0,0,0);}

 

关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)
  iOS 浏览器横屏时会重置字体大小

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

 

禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none;

 

禁止用户选中文字
-webkit-user-select:none;

 

上下拉动滚动条时卡顿、慢

div {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

IOS设备输入框默认内阴影
input {
  -webkit-appearance: none;
}

 

// 阻止页面滑动的默认行为
document.body.addEventListener('touchmove', function(event) {
  if (event.cancelable) {
  // 判断默认行为是否已经被禁用
    (!event.defaultPrevented) && event.preventDefault();
  }
});

 

你可能感兴趣的:(移动端web开发整理)