http://t.zoukankan.com/john-sr-p-5721126.html
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
1、关闭iOS键盘首字母自动大写
<input type="text" autocapitalize="off" />
2、单行文本溢出
.xx{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
3、多行文本溢出
.xx{
display:-webkit-box !importmort;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)
}
框架
移动端基础框架
zepto.js 语法与jquery几乎一样，会jquery基本会zepto
iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能
underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
fastclick 加快移动端点击响应时间
animate.css CSS3动画效果库
Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案
滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper
一般来说,在桌面的浏览器中,设备像素比（dpr）等于1,一个css像素就是代表的一个物理像素。而在移动端,大多数机型都不是为1,其中iphone的dpr普遍是2和3,那么一个css像素不再是对应一个物理像素,而是2个和3个物理像素。故css设置1px,实际产生的物理像素会变大,使得1px的效果更大。
解决方案如下
@media all and (-webkit-min-device-pixel-ratio: 2) {
.scale::after {
display: block;
content: '';
border-bottom: 1px solid #000;
transform: scaleY(.5);
}
}
@media all and (-webkit-min-device-pixel-ratio: 3) {
.scale::after {
display: block;
content: '';
border-bottom: 1px solid #000;
transform: scaleY(.333);
}
}
<body>
<div id="main" style="border: 1px solid #000000;">div>
body>
<script type="text/javascript">
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var main = document.getElementById('main');
main.style.border = '.5px solid #000000';
}
script>
手淘采用这这种方案使用Flexible实现手淘H5页面的终端适配
https://github.com/amfe/article/issues/17
在devicePixelRatio=2设置meta
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio=3设置meta
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
通过js
const dpr = window.devicePixelRatio
const meta = document.createElement('meta') // 创建meta视口标签
meta.setAttribute('name', 'viewport') // 设置name为viewport
meta.setAttribute('content', `width=device-width, user-scalable=no, initial-scale=${1/dpr}, maximum-scale=${1/dpr}, minimum-scale=${1/dpr}`)
demo
用JS根据屏幕尺寸和dpr精确地设置不同屏幕所应有的rem基准值和initial-scale缩放值，这个JS方案已经在完美解决了1px细线问题
设计稿是750,采用1：100的比例,font-size为100 * (docEl.clientWidth * dpr / 750)
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用，解决图片模糊问题和1px细线问题
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
如果在一个元素上使用scale时会导致整个元素同时缩放，所以应该在该元素的伪元素下设置scale属性
.scale::after {
display: block;
content: '';
border-bottom: 1px solid #000;
transform: scaleY(.5);
}
div.linear::after {
display: block;
content: '';
height: 1px;
background: linear-gradient(0, #fff, #000);
}
使用box-shadow模拟边框
Safari下不支持
div.shadow {
box-shadow: 0 0.5px 0 0 #000;
}
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
SVG的描边等属性的1px是物理像素的1px
//火狐需要把svg颜色用black英文表示，不支持其他颜色表示方式
.svg::after {
display: block;
content: '';
height: 1px;
background-image: url('data:image/svg+xml;utf-8,');
}
//svg也可用base64表示
.svg::after {
display: block;
content: '';
height: 1px;
background-image: url('data:image/svg+xml;utf-8,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjFweCI+PGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iMTAwJSIgeTI9IjAiIHN0cm9rZT0iYmxhY2siPjwvbGluZT48L3N2Zz4=');
}
构建1个伪元素, border为1px, 再以transform缩放到50%
优点：可以满足所有场景，且修改灵活。缺点：对于已使用伪类的元素要多层嵌套。
/* 设计稿是750,采用1：100的比例,font-size为100*(100vw/750) */
.border-1px {
position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-1px:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
07年，苹果公司发布首款Iphone前夕，遇到一个问题：当时的网站都是为大屏设计，手机屏幕太小无法正常浏览，于是苹果工程师做了一些约定解决此类问题。
这些约定当中，最为有名的是双击缩放（double tap to zoom）,这是产生300ms延迟的根源。
用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。如果用户在 iOS Safari里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。 由此产生了300ms延迟问题。在正常情况下，如果不进行特殊处理，移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后不会立即做出反应，而是会等待300ms才会触发click事件。在移动web兴起初期，用户对300ms的延迟没有太大的感觉，但随着用户对交互体验的要求的提高，如今，移动端的300ms延迟严重影响了用户体验。
解决方案如下
在html文档头部的meta标签中加入如下语句：
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
user-scalable=no表明这个页面不可缩放，也就是浏览器禁用的双击缩放事件并且同时会去掉300ms点击延迟。但这个方案也有缺点，就是完全禁用了双击缩放，当我们需要放大文字或者图片时无法满足我们的需求。
//封装tap解决click 300ms 延时
function tap (obj,callback) {
var isMove = false;//记录手指是否移动
var startTime = 0;//记录手指触摸的时间
obj.addEventListener('touchstart',function(e){
startTime = Date.now();//记录触摸时间
})
obj.addEventListener('touchmove',function(e){
isMove = true;//查看手指是否滑动
})
obj.addEventListener('touchend',function(e){
if(!isMove && (Date.now()-statrTime) < 150){
callback && callback();
}
isMove = false;//取反 重置
startTime = 0;
})
};
tap(div,function(){ //执行代码 }）；
这个代码可以监测元素点击发生时的状态，从而避免300ms的延迟。
但这个方法有一个弊端，一次只能给一个元素去解决问题。
可能有人会想，既然click点击有300ms的延迟，那对于触摸屏，直接监听touchstart事件不就好了吗？
使用touchstart去代替click事件有两个不好的地方。
假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。于是我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。
这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。