[S3-E409]CSS/CSS3常用样式与web移动端资源总结

Posted 2021-04-09 前端JavaScript

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[S3-E409]CSS/CSS3常用样式与web移动端资源总结相关的知识，希望对你有一定的参考价值。

本文：【第3章第409回】更多文章点击查看

css/css3常用样式

强制文本显示

单行显示语法：white-space:nowrap;

让一段文字在固定宽度在一行显示，最后一个字符为省略标记(...)，css样式如下

div{

white-space:nowrap;

text-overflow:ellipsis;

overflow:hidden;

}

多行文本最后省略号：

div{

display: -webkit-box;

-webkit-line-clamp:2;

overflow: hidden;

-webkit-box-orient: vertical;

text-overflow: ellipsis;

}

这里用到了文本溢出显示省略号的，即设置溢出文本显示为省略标记：

语法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增加的）;

clip：表示直接裁切溢出的文本；

ellipsis：表示文本溢出时，显示省略标记(...)，省略标记代替最后一个字符；

ellipsis-word：表示文本溢出时，也是显示省略标记(...),不同的是，省略标记代替的是最后一个词)

zoom:1的原理和作用

Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。

在平常的css编写过程中，zoom:1能够比较神奇地解决ie下比较奇葩的bug。

譬如外边距（margin）的重叠，譬如浮动的清除，譬如触发ie的 haslayout属性等等。

（重点）当设置了zoom的值之后，所设置的元素就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

ie下子元素浮动时候父元素不随着自动扩大的问题，使用下面的CSS写法：

.父元素 { overflow: auto; zoom: 1 }

点击a标签里面的图片，IE中图片出现虚线框问题

例如：div 宽300px ; img 宽100px; border:0px;

<div><img /><img /><img /></div>

上面情况刚好显示三张图

<div>

<img />

<img />

<img />

</div>

这种情况就无法在横向显示三张图，因为回车导致两图间有间隙。

解决办法就是让图片浮动。

css ie6、ie7中overflow:hidden无效解决办法

产生原因：

当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时，父元素的overflow:hidden 属性就会失效。

解决办法：

我们在IE 6、7 内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。

解决这个bug很简单，在父元素中使用 *position:relative; 即可解决该bug。

表格语法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

设置表格中的td宽度固定table-layout:fixed

table{table-layout:fixed;}

语法：table-layout:automatic | fixed | inherit

automatic：默认。列宽度由单元格内容设定。

fixed：列宽由表格宽度和列宽度设定。

inherit：规定应该从父元素继承 table-layout 属性的值。

合并表格边框border-collapse:collapse

table{border-collapse:collapse;}

语法：border-collapse:separate | collapse | inherit

separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit：规定应该从父元素继承 border-collapse 属性的值。

例如：

table{border-collapse:collapse;}

table, td, th{border:1px solid black;}

CSS text-transform控制文本的大小写

描述：text-transform 属性控制文本的大小写。

语法：text-transform:none | capitalize | uppercase | lowercase | inherit

none 默认。定义带有小写字母和大写字母的标准的文本。

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母。

lowercase 定义无大写字母，仅有小写字母。

inherit 规定应该从父元素继承 text-transform 属性的值。

text-stroke

[ text-stroke-width ]：设置或检索对象中的文字的描边厚度

[ text-stroke-color ]：设置或检索对象中的文字的描边颜色

text-stroke(文本描边)和text-fill-color(文本填充色)注意点：

目前这两个属性只有webkit内核的Safari和Chrome支持，例如：

.box{-webkit-text-stroke: 3.3px #2A75BF;}

text-fill-color：颜色值，和color属性差不多都是文字的样式；

注意：同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；

text-fill-color可以使用透明值，即：text-fill-color：transparent

text-shadow

.box{text-shadow:0px 0px 0px #333333;}

属性值依次：水平方向位移（支持负值）、垂直方向位移（支持负值）、模糊半径、阴影颜色

text-shadow对同一个text，可设置多个阴影，与box-shadow类似，使用逗号","分割，前一个设置效果在后一个设置效果之上。

box-shadow 参考：http://www.cnblogs.com/lhb25/...

box-shadow

为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。全面的写法：

.box-shadow-6{

box-shadow:-10px 0 10px red, /*左边阴影*/

10px 0 10px yellow, /*右边阴影*/

0 -10px 10px blue, /*顶部阴影*/

0 10px 10px green; /*底边阴影*/

}

letter-spacing字符间距

letter-spacing 属性增加或减少字符间的空白（字符间距）。

例如： letter-spacing: 2px;

textarea去掉右侧滚动条，去掉右下角拖拽

<TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA>

css中透明度兼容代码

div{filter: alpha(opacity=80);opacity:0.8;}

根据input的type来控制css样式

1.用css中的type选择器

input[type="text"]{ background-color:#FFC;}

2.用css的expression判断表达式

input{ background-color:expression(this.type=="text"?'#FFC':'');}

3.用javascript脚本实现(觉得没必要，省略...)

css3设置字体

@font-face{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

url('Sansation_Light.eot'); /* IE9+ */

}

div{

font-family:myFirstFont;

}

网页字体设置

font-family:'YourWebFontName';

src:url('YourWebFontName.eot'); /* IE9 Compat Modes */

src:url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('YourWebFontName.woff') format('woff'), /* Modern Browsers */

url('YourWebFontName.ttf') format('truetype'), /* Safari, android, ios */

url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */}

css强制性换行

div{

word-break:break-all; /*支持IE，chrome，FF不支持*/

word-wrap:break-word;/*支持IE，chrome，FF*/

}

CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效，不识别)

:nth-child(2)选取第几个标签，“2可以是你想要的数字”

:nth-child(2n)选取偶数标签，2n也可以是even

:nth-child(2n-1)选取奇数标签，2n-1可以是odd

:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

css3实现背景颜色渐变

background:-webkit-linear-gradient(top,#FFF,#cb1919);

background:-o-linear-gradient(top,#FFF,#cb1919);

background:-ms-linear-gradient(top,#FFF,#cb1919);

background:-moz-linear-gradient(top,#FFF,#cb1919);

background:linear-gradient(top,#FFF,#cb1919);

第一个参数：设置渐变的起始位置

第二个参数：设置起始位置的颜色

第三个参数：设置终止位置的颜色

IE 浏览器

IE浏览器实现渐变只能使用IE自己的滤镜去实现

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一个参数：渐变起始位置的颜色

第二个参数：渐变终止位置的颜色

第三个参数：渐变的类型

0 代表竖向渐变 1 代表横向渐变

css3的RGB颜色和HSL颜色， IE8不识别rgba写法

其中RGB颜色的原理是通过定义不同的红绿蓝色值来组成一个颜色。

color:rgb(254,2,8);

其中HSL是通过色相、饱和度、亮度模式来申明颜色的。color:hsl(359,99%,40%);

如果需要设置透明背景则可以用到他们：

background-color:hsla(0,0%,100%,0.8);

background-color:rgba(255,255,255,0.8);

不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。

background-color:rgba(0,0,0,0.5)，此写法解决opacity带来的元素也透明问题，但IE8低版本浏览器不支持。

初始化em，u的斜体

em,u{font-style: normal;}

媒体查询功能

一般写法：

@media screen and (max-width: 960px){

body{

background: #000;

}

}

应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

@media (max-width: 960px){

body{

background: #000;

}

}

其中css2的媒体查询：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

我们想知道移动设备是不是纵向放置的显示屏，可以这样写：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。

下面的写法是实现尺寸等于480px：

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){

/*自己添加的样式*/

}

其中对于-webkit-min-device-pixel-ratio作如下解释：

-webkit-min-device-pixel-ratio为1.0

1. 所有非Retina的Mac

2. 所有非Retina的iOS设备

3. Acer Iconia A500

4. Samsung Galaxy Tab 10.1

5. Samsung Galaxy S

-webkit-min-device-pixel-ratio为1.3

Google Nexus 7

-webkit-min-device-pixel-ratio为1.5

1. Google Nexus S

2. Samsung Galaxy S II

3. HTC Desire

4. HTC Desire HD

5. HTC Incredible S

6. HTC Velocity

7. HTC Sensation

-webkit-min-device-pixel-ratio为2.0

1. iPhone 4

2. iPhone 4S

3. iPhone 5

4. iPad (3rd generation)

5. iPad 4

6. 所有Retina displays 的MAC

7. Google Galaxy Nexus

8. Google Nexus 4

9. Google Nexus 10

10. Samsung Galaxy S III

11. Samsung Galaxy Note II

12. Sony Xperia S

13. HTC One X

样式实现三角形

div{

position:absolute;

left:50%;

bottom:0;

margin-left:-10px;

width:0;

height:0;

border-width:10px;

border-style:solid dashed dashed dashed;

border-color:transparent transparent #71151c transparent;

}

css3水平垂直居中

div{

display: box;

display: -webkit-box;

display: -moz-box;

-webkit-box-pack:center;

-moz-box-pack:center;

-webkit-box-align:center;

-moz-box-align:center;

}

css3属性 -webkit-filter(改变模糊度亮度透明度等方法)

-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。

现在规范中支持的效果有：

- grayscale 灰度值为0-1之间的小数

- sepia 褐色　　　　　　值为0-1之间的小数

- saturate 饱和度　　　　值为num

- hue-rotate 色相旋转　　值为angle

- invert 反色　　　　　　值为0-1之间的小数

- opacity 透明度　　　　　值为0-1之间的小数

- brightness 亮度　　　　值为0-1之间的小数

- contrast 对比度　　　　值为num

- blur 模糊　　　　　　值为length

- drop-shadow 阴影

用法是标准的CSS写法，如：

-webkit-filter: blur(2px);

使用方法：（配合动画使用）

.jaguar-con-show img.jaguar-con-imglast{

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.jaguar-con-show img.jaguar-con-imglast{

-webkit-filter: blur(3px) brightness(.6);

-moz-filter: blur(3px) brightness(.6);

-o-filter: blur(3px) brightness(.6);

-ms-filter: blur(3px) brightness(.6);

filter: blur(3px) brightness(.5);

-webkit-transform:scale(1.1,1.1);

-moz-transform:scale(1.1,1.1);

/*border: 3px solid #000;*/

}

CSS pointer-events

pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何html元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。

如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素.

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。

样式改变单词的大小写

首字母大写：text-transform:capitalize

全部大写：text-transform:uppercase

全部小写：text-transform:lowercasecase

首字母大写<inputtype="text"style="text-transform:capitalize;">

全部大写<inputtype="text"style="text-transform:uppercase;">

全部小写<inputtype="text"style="text-transform:lowercasecase;">

html title属性内容换行方法

a.直接填写title内容时候“回车键”换行

b.使用html title换行代码

使用代码换行共两种代码，均可实现html标签内title内容显示时换行。

换行代码符合分别为：

“
”和“”

“
”拼写：&（and符号，键盘数字键7一起&）+ #（井号）+ 10（阿拉伯数字十）+ ;（小写分号）

“”拼写：&（and符号，键盘数字键7一起&）+ #（井号）+ 13（阿拉伯数字十三）+ ;（小写分号）

以上符合数字输入均必须英文半角模式输入。使用时候，在需要换行地方任选一种（组）换行符号代码即可。

移动端定宽布局，安卓上文字变大了解决办法

例如：

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi" />

那么解决办法：给文字区外面的div设最大高度100%。

HTML5:input file控件限制上传文件类型

input file控件限制上传文件类型

文件类型中间用，分开

html和htm这样的要写成两个

<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docx,.xls,.xlsx,.pdf">

如果限制上传文件为图片类型，如下：

<input type="file" class="file" value="上传" accept="image/*"/>

去掉input聚焦,点击a标签，出现的外虚线框

input:focus{outline: none;}

CSS3 vw让overflow:auto页面滚动条出现时不跳动

传统的实现方式：

body { overflow-y: scroll; }

css3实现方式：

.wrap-outer {

margin-left: calc(100vw - 100%);

}

或者：

.wrap-outer {

padding-left: calc(100vw - 100%);

}

首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则，不推荐）；

然后，calc是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上)；

最后，100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。

于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！

***以下内容将主要是在移动端使用的多***

meta相关知识

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

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

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

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

<meta name="apple-mobile-web-app-capable" content="yes" />

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

移动端viewport模板

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

<meta content="yes" name="apple-mobile-web-app-capable"> 

<meta content="black" name="apple-mobile-web-app-status-bar-style">

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

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

<title>viewport通用</title>

<link style="text/css" rel="stylesheet" href="home.css">

<script type="text/javascript" ></script>

</head>

<body>



</body>

</html>

viewport模板 - target-densitydpi=device-dpi，android 2.3.5以下版本不支持

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">

自己做移动端活动的时候常如下方式：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="yes" name="apple-mobile-web-app-capable"> 

<meta content="black" name="apple-mobile-web-app-status-bar-style">

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

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

<title>viewport通用</title>

<script type="text/javascript">

var phoneWidth = parseInt(window.screen.width);

var phoneScale = phoneWidth / 750;

var ua = navigator.userAgent;

if (/Android (\d+\.\d+)/.test(ua)) {

var version = parseFloat(RegExp.$1);

if (version > 2.3) {

document.write('<meta name="viewport" id="vie" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');

} else {

document.write('<meta name="viewport" id="vie" content="width=750, target-densitydpi=device-dpi">');

}

} else {

document.write('<meta id="vie" name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi, minimal-ui">');

}

</script>

<link style="text/css" rel="stylesheet" href="home.css">

<script type="text/javascript" ></script>

</head>

<body>



</body>

</html>

移动端问题总结

移动端如何定义字体font-family

中文字体使用系统默认即可，英文用Helvetica，为什么呢，首先先看一下各平台的主流字体支持情况（来源网络，没有验证）！！！

各系统的默认字体和常用字体：

（表格稍后补上）

需要详细相关信息，可查看《兼容PC手机端字体》文章

结论

各个手机系统有自己的默认字体，且都不支持微软雅黑

如无特殊需求，手机端无需定义中文字体，使用系统默认

英文字体和数字字体可使用 Helvetica ，三种系统都支持

代码：

/* 移动端定义字体的代码 */

body{font-family:Helvetica;}

移动端touch事件(区分webkit 和 winphone)

当用户手指放在移动设备在屏幕上滑动会触发的touch事件

以下支持webkit

touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指

touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动

touchend——当手指离开屏幕时触发

touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

TouchEvent

touches：屏幕上所有手指的信息

targetTouches：手指在目标区域的手指信息

changedTouches：最近一次触发该事件的手指信息

touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息

参数信息(changedTouches[0])

clientX、clientY在显示区的坐标

target：当前元素

以下支持winphone 8

MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指

MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action:

none;}可以阻止默认情况的发生：阻止页面滚动

MSPointerUp——当手指离开屏幕时触发

移动端click事件有300 ms的延迟响应问题

历史原因：

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick

解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

清除IOS系统手机对input等表单元素的默认样式

.css{-webkit-appearance:none;}

伪元素改变number类型input框的默认样式

input[type=number]::-webkit-textfield-decoration-container {

background-color: transparent;

}

input[type=number]::-webkit-inner-spin-button {

-webkit-appearance: none;

}

input[type=number]::-webkit-outer-spin-button {

-webkit-appearance: none;

}

CSS美化Placeholder提示信息的样式兼容

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

手机对Placeholder提示信息都基本带有默认的样式，兼容各种浏览器的使用方式：

.css::-webkit-input-placeholder {color: #777;} /* WebKit browsers */

.css:-moz-placeholder {color: #777;opacity: 1;} /* Mozilla Firefox 4 to 18 */

.css::-moz-placeholder {color: #777;opacity: 1;} /* Mozilla Firefox 19+ */

.css:-ms-input-placeholder {color: #777;} /* Internet Explorer 10+ */

webkit表单输入框placeholder的文字能换行么

ios可以，android不行~

在textarea标签下都可以换行~

取消a,button等元素被触摸时产生的半透明灰色遮罩或者虚线框问题

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

关闭手机端横屏或者竖屏自动调整字体大小功能

ios使用-webkit-text-size-adjust禁止调整字体大小:

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

text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能。

android使用以下代码，该接口只在微信浏览器下有效:

/**

* 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小

* 但是会有一个1秒左右的延迟，期间可以考虑通过loading展示

* 仅供参考

*/

(function(){

if (typeof(WeixinJSBridge) == "undefined") {

document.addEventListener("WeixinJSBridgeReady", function (e) {

setTimeout(function(){

WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {

alert(JSON.stringify(res));

});

},0);

});

} else {

setTimeout(function(){

WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {

alert(JSON.stringify(res));

});

},0);

}

})();

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

禁止ios和android用户选中文字

.css{-webkit-user-select:none}

当然pc端现在也在用禁止用户选中文字，兼容写法：

.test{

-webkit-user-select:none;

-moz-user-select:none;

-o-user-select:none;

user-select:none;

}

当然有时候pc上也直接写到html代码中，如：

<div class="test" onselectstart="return false;" unselectable="on">选择我试试，你会发现怎么也选择不到我，哈哈哈哈</div>

代码解释：

IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到

user-select:none 的效果；Safari和Chrome也支持该标签属性；

直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到user-select:none 的效果；unselectable 的另一个值是 off；

除Chrome和Safari外，在其它浏览器中，如果将文本设置为

-ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为

-ms-user-select:none; 的区域文本；

对应的脚本特性为userSelect。

发短信：winphone系统无效，<a href="sms:10086">发短信给: 10086</a>

发邮件：<a href="mailTo:10086@qq.com">10086@qq.com</a>

详细了解mailTo：移动web页面给用户发送邮件的方法 (邮件含文本、图片、链接)

移动端实现类似hover效果

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活移动端css的active效果。

直接在body上添加ontouchstart，同样可激活移动端css的active效果，比较推荐这种方式，代码如下：

html代码：

<body ontouchstart>

</body>

css代码：

.btn:active{background-color: red;}

开启硬件加速

解决页面闪白，保证动画流畅

.css {

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

如何阻止windows Phone的默认触摸事件

winphone下默认触摸事件事件使用e.preventDefault是无效的

目前解决方法是使用样式来禁用

html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

屏幕旋转的事件和样式

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

window.onorientationchange = function(){

switch(window.orientation){

case -90:

case 90:

alert("横屏:" + window.orientation);

case 0:

case 180:

alert("竖屏:" + window.orientation);

break;

}

}

样式：

//竖屏时使用的样式

@media all and (orientation:portrait) {

.css{}

}

//横屏时使用的样式

@media all and (orientation:landscape) {

.css{}

}

IE10（winphone8）表单元素默认外观如何重置

禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand {

display: none;

}

禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{

display: none;

}

禁用PC端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{

display: none;

}

Retina 显示屏的问题

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

那么，前端的应对方案是：

设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

//例如图片宽高为：200px*200px，那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

.css{font-size:20px}

移动端设置滚动条的默认样式

/* 设置滚动条的样式 */

::-webkit-scrollbar {

width:12px;

}

/* 滚动槽 */

::-webkit-scrollbar-track {

-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);

border-radius:10px;

}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {

border-radius:10px;

background:rgba(0,0,0,0.1);

-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

background:rgba(255,0,0,0.4);

}