web技巧总结

 

一、meta的使用

1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。

2、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉：

<meta name="msapplication-tap-highlight" content="no">

3、忽略页面的数字为电话，忽略email识别 ：

<meta name="format-detection" content="telephone=no, email=no"/>

二、针对适配等比缩放的方法:

@media only screen and (min-width: 1024px){

　　body{zoom:3.2;}

}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

　　body{zoom:2.4;}

}

@media only screen and (min-width: 640px) and (max-width: 767px) {

　　body{zoom:2;}

}

@media only screen and (min-width: 540px) and (max-width: 639px) {

　　body{zoom:1.68;}

}

@media only screen and (min-width: 480px) and (max-width: 539px) {

　　body{zoom:1.5;}

}

@media only screen and (min-width: 414px) and (max-width: 479px) {

　　body{zoom:1.29;}

}

@media only screen and (min-width: 400px) and (max-width: 413px) {

　　body{zoom:1.25;}

}

@media only screen and (min-width: 375px) and (max-width: 413px) {

　　body{zoom:1.17;}

}

@media only screen and (min-width: 360px) and (max-width:374px) {

　　body{zoom:1.125;}

}

三、布局

1.布局使用百分比：　

2.em与rem：

3.栅格布局：

四、文本的处理

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表示隐藏两行)

}

五、图片、媒体的处理

1、//使用流体图片

img{

　　width:100%;

　　height:auto;

　　width:auto\9;

}

2、audio元素和video元素在ios和andriod中无法自动播放

　　应对方案：触屏即播

$('html').one('touchstart',function(){

　　audio.play()

})

3、如何禁止保存或拷贝图像

　　通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

img {

　　-webkit-touch-callout: none;

}

PS：需要注意的是，该方法只在 iOS 上有效。

六、阴影的处理

1、 移动端如何清除输入框内阴影

　　在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,textarea {

　　border: 0;

　　-webkit-appearance: none;

}

七、字体的处理

对于网站字体设置

1、移动端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

2、移动和pc端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

3、字体大小尽量使用pt或者em，rem，代替px。

4、设置input里面placeholder字体的大小::-webkit-input-placeholder{ font-size:10pt}

5、解决字体在移动端比例缩小后出现锯齿的问题：-webkit-font-smoothing: antialiased;