/* 移动端定义字体的代码 */
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开发整理的更多相关文章

  1. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  2. 移动端web开发的一些知识点

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

  3. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  4. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  5. 移动端web开发基础概念

    最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...

  6. 移动端Web开发注意点

    不用考虑浏览器兼容性 移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点. 当然,不同版 ...

  7. 移动端Web开发如何处理横竖屏

    <!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...

  8. 移动端web开发技巧(转)

    原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...

  9. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

随机推荐

  1. 学会如何使用Github进行托管代码和用markdown撰写心得

    这次作业是学会如何使用Github进行托管代码和用markdown撰写心得. 1.掌握使用Git进行代码版本,使用github进行代码托管.(git使用,推荐imooc公开课: 公开课 ) 登录 gi ...

  2. Hadoop详细配置教程

    windows下采用PuTTY或者Xshell连接远程主机 mac用终端连接远程linux主机:ssh user@hostname user 为 linux 服务器的管理员名称 hostname 为 ...

  3. Swift与OC代码转换实例

    1. Objectice-C code: NSShadow *shadow = [NSShadow new]; [shadow setShadowColor:[UIColor colorWithRed ...

  4. Python操作Saltstack

    1.代码 # -*- coding:utf-8 -*- import urllib.request import urllib.parse import json class saltAPI(): d ...

  5. 10、MySQL 的复制

    10.1 复制的概述 10.2 配置复制 10.3 复制的原理 有两种 1.基于sql语句的复制:传输数据少(sql语句文件),就能复制大量的数据,不过由于一些自定义的函数问题,会有一些限制: 2.基 ...

  6. POJ1807&&1276

    DP专题下的背包专题 其实就是PJ的那些东西了 主流的背包有三种:01背包,完全背包和多重背包 其中01背包和完全背包的转移就比较经典了,而多重背包也是在前两者基础上演变一下即可 1837 题意:有一 ...

  7. 蒙提霍尔游戏 python 模拟

    本文使用蒙特卡罗方法验证蒙提霍尔游戏的结论. 以下代码,本人原创! 完整代码 import random # 蒙提霍尔游戏 def play_game(strategy='nonchange'): # ...

  8. tkinter 对键盘和鼠标事件的处理

    鼠标事件 <ButtonPress-n> <Button-n> <n> 鼠标按钮n被按下,n为1左键,2中键,3右键 <ButtonRelease-n> ...

  9. 《杜增强讲Unity之Tanks坦克大战》1-准备工作

    0.案例介绍 0.1开始界面   点击Play Now 进入游戏界面   左边的坦克使用ws控制前后移动,ad键左右旋转,空格键开火   右边的坦克使用方向键上下控制前后移动,方向键左右键实现左右旋转 ...

  10. Unity3d Transform.forward和Vector3.forward的区别!

    在Unity中有两个forward,一个是Transform.forward一个是Vector3.forward. 对于Vector3来说,它只是缩写.没有其它任何含义. Vector3.forwar ...