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 函数替代

http://qiaolevip.iteye.com/blog/2306090华为手机不兼容js问题

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,830评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,992评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,875评论 0赞 331
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,837评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,734评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,091评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,550评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,217评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,368评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,027评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,623评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2赞 341

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,299评论 0赞 11
  • CSS-hack史上最全版
    -:Internet Explorer CSS :- SpecialPurpose _::selection, :...
    弥果阅读 1,280评论 0赞 1
  • css总结
    1.css简介 css注释 /* */ 浏览器私有属性chrome，safari: -webkit-fir...
    萌琦琦de诗扬阅读 264评论 0赞 2
  • CSS总结
    复习完CSS后总结一下，首先看一下CSS的一个体系结构图： 大体上分为这八个部分，参考一下vivijind的css...
    苏敏阅读 589评论 0赞 3
  • 移动端1
    一、使用真实手机测试未发布网页的方法 方法① 在虚拟机中搭建xampp，将文件通过FTP传到虚拟机，在一个局域网中...
    fastwe阅读 704评论 0赞 0