[移动开发]CSS内容大总结

移动端背景无法固定解决方案

body:before {

content: ' ';

position: fixed;

z-index: -1;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: url(...) center 0 no-repeat;

background-size: cover;

}

如何去掉ios里面输入框输入时的灰色背景

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

关闭ios键盘首字母大写

<input type="text" autocapitalize="off"/>

禁止文本缩放

html{-webkit-text-adjust:100%}

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

input,textarea{border:0,-webkit-appearance:none}

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

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

移动端禁止选中内容

div {

-webkit-user-select: none;

}

移动端取消touch高亮效果在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：

.xxx {

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

如何禁止保存或拷贝图像通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：PS：需要注意的是，该方法只在 iOS 上有效。

img {

-webkit-touch-callout: none;

}

解决字体在移动端比例缩小后出现锯齿的问题

-webkit-font-smoothing: antialiased;

栅格布局：

box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局

.按钮被按下效果的实现需要给a标签加a:active属性和添加一段空函数

document.body.addEventListener('touchend', function () { })

audio元素和video元素在ios和andriod中无法自动播放应对方案：触屏即播

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

audio.play()

})

手机拍照和上传图片<input type="file">的accept 属性

<input type=file accept="image/*">

有关Flexbox弹性盒子布局一些属性不定宽高的水平垂直居中

.xxx{

position:absolute;

top:50%;

left:50%;

z-index:3;

-webkit-transform:translate(-50%,-50%)；

border-radius:6px;

background:#fff;

}

[flexbox版]不定宽高的水平垂直居中

.xx{

justify-content:center;//子元素水平居中，

align-items:center;//子元素垂直居中;

display:-webkit-flex;

}

.单行文本溢出

.xx{

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

.多行文本溢出

.xx{

display:-webkit-box !importmort;

overflow:hidden;

text-overflow:ellipsis;

word-break:break-all;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;(数字2表示隐藏两行)

}

使用流体图片

img{

width:100%;

height:auto;

width:auto\9;

}

一像素边框（例子:移动端列表的下边框）

.list-iteam:after{

position: absolute;

left: 0px;

right: 0px;

content: '';

height: 1px;

transform: scaleY(0.5);

-moz-transform: scaleY(0.5);

-webkit-transform:scaleY(0.5);

background-color: #e3e3e3;

}

除去移动端点击的背景颜色

-webkit-tap-highlight-color:rgba(0,0,0,0);

文字对齐

使用after，before伪元素：

div:after{

content:"",

display:inline-block;

width:100%

}

用max-width来防止图片撑破容器

img{

display:inline-block;

max-width:100%;

}

用pointer-event来禁用事件

该属性可以做以下事情：

阻止任何点击动作的执行

使链接显示为默认光标

阻止默认hover和active状态

阻止js点击事件的触发

.disabled{pointer-events:none;}

禁止文本选中

body{user-select:none}

http://www.qdfuns.com/notes/47381/e7822d9464795e332f244a8804855509.html

.使用 rem时，设某个 div比如的 height:3rem;line-height:1.5rem;overflow:hidden;时，在某些 android手机上可能会出现显示不止两行,第三行会显示点头部。 解决：利用 js获取文字 line-height再去设置 div高度

3.有些版本的 iphone4中， audio和 video默认播放事件不会触发，比如使用 window.onload或计时器等都不能触发播放，必须用 JS写事件让用户手动点击触发才会开始播放，比如

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

audio.play();

})

4.想要在 touchmove:function(e,参数一)加一个参数，结果直接使用 e.preventDefault()就会 e 报错，处理方法为

touchmove:function(e,参数一){

var e=arguments[0]? ? ? ?? ?? ? e.preventDefault()

}

7.当弹窗出现时，想禁止屏幕的滑动，给那个遮罩层添加 touchmove事件即可，用 e.preventDefault()会阻止的 scroll， click等事件，消失时再 off掉，

$(".body_cover").on("touchmove", function(e) {

e.preventDefault();

});

8.使用 input file上传文件时，可以指定接受的类型， accept="image/png,image/jpeg,image/gif" ，同时在 android上默认不能使用相机，可以加 capture="camera" 同时，由于原生的样式不好看，可以通过设置input的display:none,然后使用id.click()去触发input元素的点击。

.微信里假如页面一使用 ajax获取数据，当你进入下一页面再按返回键返回页面一的时候，有些情况不会去请求 ajax数据，会使用缓存，然而 ajax来的数据又并没有存在缓存里。要设置 cache:false（iphone、android的某些手机都可能出现）

7.在微信 js config的时候，如果 URL的参数有如 ?a={"param": "1"},会导致签名失败。给参数用 encodeURIComponent编码后再传过去也是失败！研究了好久。（后台代码没做任何修改，只在我前端修改代码）。所以最后还是使用了 ?param=1这样的格式

/*判断是否安装了flash*/

function flashChecker()

{

var hasFlash=0;　　　　//是否安装了flash

var flashVersion=0;　　//flash版本

if(document.all)

{

var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');

if(swf) {

hasFlash=1;

VSwf=swf.GetVariable("$version");

flashVersion=parseInt(VSwf.split(" ")[1].split(",")[0]);

}

}else{

if (navigator.plugins && navigator.plugins.length > 0)

{

var swf=navigator.plugins["Shockwave Flash"];

if (swf)

{

hasFlash=1;

var words = swf.description.split(" ");

for (var i = 0; i < words.length; ++i)

{

if (isNaN(parseInt(words[i]))) continue;

flashVersion = parseInt(words[i]);

}

}

}

}

return {f:hasFlash,v:flashVersion};

}

var fls=flashChecker();

if(fls.f) document.write("您安装了flash,当前flash版本为: "+fls.v+".x");

else document.write("您没有安装flash");

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

@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;}

}

http://www.cnblogs.com/PeunZhang/p/3407453.html

viewport-fit解决iphoneX的“刘海”问题

解决的方案是：1、给body添加一个background；2、添加viewport-fit=cover meta标签，使页面占满整个屏幕

4、window.open 坑爹指数：★★★

? ? ? 由于它打开的页面是popup类型，导致部分手机浏览器会阻挡并拦截弹窗，根本弹不出来，接下去的步骤就无法完成了。

? ? ? ?解决：使用字符串的 window.location.href 函数替代

?