深圳网站建设排行,厦门网站建站,哪些网站可以找到做药人的信息,开发app制作公司前言本文是摘录整理了移动端常见的一些bug以及解决方案#xff0c;第一篇#xff0c;后面还会有持续的文章更新整理。点击样式闪动Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候#xff0c;它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highli…前言本文是摘录整理了移动端常见的一些bug以及解决方案第一篇后面还会有持续的文章更新整理。点击样式闪动Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highlight-color这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时响应的背景框的颜色。建议写在样式初始化中以避免所以问题div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出现蓝色边框outline:none-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;// i.e . Nexus5/Chrome and Kindle Fire HD 7 -webkit-tap-highlight-color : transparent ;复制代码屏蔽用户选择Q: 禁止用户选择页面中的文字或者图片A:代码如下-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;复制代码移动端如何清除输入框内阴影Q: 在iOS上输入框默认有内部阴影但无法使用 box-shadow 来清除如果不需要阴影可以这样关闭A:代码如下-webkit-appearance: none;复制代码禁止文本缩放Q: 禁止文本缩放A:代码如下-webkit-text-size-adjust: 100%;复制代码如何禁止保存或拷贝图像Q: 如何禁止保存或拷贝图像A:代码如下img{-webkit-touch-callout: none;}复制代码解决字体在移动端比例缩小后出现锯齿的问题Q: 解决字体在移动端比例缩小后出现锯齿的问题A:代码如下-webkit-font-smoothing: antialiased;复制代码设置input里面placeholder字体的大小Q: 设置input里面placeholder字体的大小A:代码如下::-webkit-input-placeholder{ font-size:10pt;}复制代码audio元素和video元素在ios和andriod中无法自动播放Q: audio元素和video元素在ios和andriod中无法自动播放A:代码如下,触屏及播放$(html).one(touchstart,function(){audio.play()})复制代码手机拍照和上传图片Q: 针对file类型增加不同的accept字段A:代码如下的accept 属性复制代码输入框自动填充颜色Q: 针对input标签已经输入过的会针对曾经输入的内容填充黄色背景这是webkit内核自动添加的对应的属性是autocomplete,默认是on,另对应的样式是input:-webkit-autofill 且是不可更改的。A:方案如下1 设置标签的autocompleteoff,亲测无效可能2 设置盒子的内阴影为你常态的颜色(下面以白色为例)box-shadow:0 0 0 1000px #fff inset ;-webkit-box-shadow: 0 0 0px 1000px #fff inset;复制代码开启硬件加速Q: 优化渲染性能A:代码如下-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);复制代码用户设置字号放大或者缩小导致页面布局错误body{-webkit-text-size-adjust: 100% !important;text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;}复制代码移动端去除type为number的箭头input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none !important;margin: 0;}复制代码实现横屏竖屏的方案css 用 css3媒体查询缺点是宽度和高度不好控制media screen and (orientation: portrait) {.main {-webkit-transform:rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);width: 100vh;height: 100vh;/*去掉overflow 微信显示正常但是浏览器有问题竖屏时强制横屏缩小*/overflow: hidden;}}media screen and (orientation: landscape) {.main {-webkit-transform:rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0)}}复制代码js 判断屏幕的方向或者resize事件var evt onorientationchange in window ? orientationchange : resize;window.addEventListener(evt, function() {var width document.documentElement.clientWidth;var height document.documentElement.clientHeight;$print $(#print);if( width height ){$print.width(width);$print.height(height);$print.css(top, 0 );$print.css(left, 0 );$print.css(transform , none);$print.css(transform-origin , 50% 50%);}else{$print.width(height);$print.height(width);$print.css(top, (height-width)/2 );$print.css(left, 0-(height-width)/2 );$print.css(transform , rotate(90deg));$print.css(transform-origin , 50% 50%);}}, false);复制代码参考资料
