- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"
- />
移动端页面添加 meta 标签,可以让文档的宽度与设备的宽度保持 1:1,文档的最大宽度比例是 1.0,不允许用户点击屏幕放大浏览。
- <meta name="format-detection" content="telephone=no" />
- <meta name="format-detection" content="email=no
- "/>
- - webkit - user - select: none
- - webkit - appearance: none
想要设置一个宽度 100% 的元素,又要设置元素固定的 padding-left 或 padding-right,还有边框,就会出现水平滚动条,可以用 box-sizing 来解决。
- * ,
- *:before,
- *:after { - webkit - tap - highlight - color: transparent; - webkit - box - sizing: border - box; - moz - box - sizing: border - box; - ms - box - sizing: border - box;
- box - sizing: border - box;
- }
- overflow: hidden;
- text - overflow: ellipsis;
- display: -webkit - box; - webkit - line - clamp: 2; - webkit - box - orient: vertical;
- width: 300px;
- white - space: nowrap;
- text - overflow: ellipsis;
- overflow: hidden;
- .clearfix: after {
- content: ".";
- display: block;
- height: 0;
- visibility: hidden;
- clear: both;
- }.clearfix { * zoom: 1;
- }
- table - layout: fixed;
- word -
- break: break - all;
- word - wrap: break - word;
在 iOS 上如果想让一个元素拥有像 Native 的滚动效果,可以这样写
- overflow - y: scroll; - webkit - overflow - scrolling: touch;
3d
- position: absolute;
- top: 50 % ;
- left: 50 % ; - ms - transform: translate3d( - 50 % , -50 % , 0);
- /*IE9*/
- - moz - transform: translate3d( - 50 % , -50 % , 0);
- /*Firefox*/
- - webkit - transform: translate3d( - 50 % , -50 % , 0);
- /*Safari and Chrome*/
- - o - transform: translate3d( - 50 % , -50 % , 0);
- /*Opera*/
- transform: translate3d( - 50 % , -50 % , 0);
2d
- position: absolute;
- top: 50 % ;
- left: 50 % ; - ms - transform: translate( - 50 % , -50 % );
- /*IE9*/
- - moz - transform: translate( - 50 % , -50 % );
- /*Firefox*/
- - webkit - transform: translate( - 50 % , -50 % );
- /*Safari and Chrome*/
- - o - transform: translate( - 50 % , -50 % );
- /*Opera*/
- transform: translate( - 50 % , -50 % );
转载请并标注: "本文转载自 linkedkeeper.com (文/张松然)"
来源: http://www.tuicool.com/articles/22Izmib