移动端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开发整理的更多相关文章
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- 移动端web开发的一些知识点
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 移动端web开发基础概念
最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...
- 移动端Web开发注意点
不用考虑浏览器兼容性 移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点. 当然,不同版 ...
- 移动端Web开发如何处理横竖屏
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...
- 移动端web开发技巧(转)
原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...
- 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)
一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...
随机推荐
- ajax回退的解决方案
http://www.cnblogs.com/snandy/archive/2011/09/18/2180102.html
- Python2.7-csv
csv模块,用于读写 csv 文件,常用 reader 和 writer 对象进行操作 1.模块的类 1.1 Dialect 对象,设置 csv 文件的各种格式,包括分隔符,引用符,转义符等 1.1. ...
- day36
今日内容 1.GIL解释器锁 2.GIL解释器锁与自定义锁 3.死锁现象与递归锁 4.信息量 5.Event 6.线程queue 1.GIL解释器锁 from multiprocessing impo ...
- 20155211《网络对抗》Exp02 后门原理与实践
20155211<网络对抗>Exp02 后门原理与实践 实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启动 ( ...
- 20155338《网络对抗》Web安全基础实践
20155338<网络对抗>Web安全基础实践 实验过程 WebGoat 在终端中输入 java -jar webgoat-container-7.0.1-war-exec.jar 开启W ...
- EZ 2018 03 30 NOIP2018 模拟赛(六)
链接:http://211.140.156.254:2333/contest/67 转眼间上次加回来的Rating又掉完了. 这次不知为何特别水,T1想了一段时间没想出来弃了,导致后面心态炸了. T2 ...
- 11.8 开课二个月零四天 (Jquery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- Partition4:增加分区
在关系型 DB中,分区表经常使用DateKey(int 数据类型)作为Partition Column,每个月的数据填充到同一个Partition中,由于在Fore-End呈现的报表大多数是基于Mon ...
- 架构师修练 I - 超级代码控
可实现的是架构,空谈是概念 So don't tell me the concepts show me the code! “不懂编码的架构师不是好架构师” 好架构师都是超级代码控. 代码是最好 ...