转 移动web问题小结 https://www.nihaoshijie.com.cn/index.php/archives/455/

移动web问题小结

本文主要收集一些移动web开发中常见的问题和解决办法，在日常的工作中遇到新的问题会不定时更新到文章中。

屏蔽阴影：

1	-webkit-appearance:none

 

亲测，可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改。

Meta标签：

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

这个想必大家都知道，当页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。

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

这两个属性分别对ios上自动识别电话和android上自动识别邮箱做了限制。

获取滚动条的值：

1	window.scrollY window.scrollX

桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？就是上面两个属性，但是事实证明android也支持这属性，所以索性都用woindow.scroll.

禁止选择文本：

1	-webkit-user-select:none

禁止用户选择文本，ios和android都支持

 

css之border-box：

1 2 3 4 5 6 7

element{ width: 100%; padding-left: 10px; box-sizing:border-box; -webkit-box-sizing:border-box; border: 1px solid blue; }

那我想要一个元素100%显示，又必须有一个固定的padding-left／padding-right，还有1px的边框，怎么办？这样编写代码必然导致出现横向滚动条，肿么办？要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性，对于这个属性的具体解释不做赘述（想深入了解的同学可以到w3school查看，要知道自己动手会更容易记忆）。让我们看看如何解决上面的问题：

css3多文本换行：

1 2 3 4 5 6 7

p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

Webkit支持一个名为-webkit-line-clamp的属性，参见链接，也就是说这个属性并不是标准的一部分，可能是Webkit内部使用的，或者被弃用的属性。需要注意的是display需要设置成box，-webkit-line-clamp表示需要显示几行。

Retina屏幕高清图片：

1 2 3 4

selector { background-image: url(no-image-set.png); background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x)