移动端网页注意事项 (3)

设计稿切出来的图片长宽保证为 偶数 ,并使用 backgroud-size 把图片缩小为原来的 1/2

//例如图片宽高为:200px*200px,那么写法如下 .css{ width:100px; height:100px; background-size:100px 100px; }

其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px

参考《 高清显示屏原理及设计方案 》

7、ios系统中元素被触摸时产生半透明灰色遮罩

ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置 -webkit-tap-highlight-color 的 alpha 值为 0 ,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

a,button,input,textarea { -webkit-tap-highlight-color: rgba(0,0,0,0); } 8、部分android系统中元素被点击时产生边框

android用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样,可设置 -webkit-tap-highlight-color 的 alpha 值为 0 去除部分机器自带的效果

a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0;) }

另外,有些机型去除不了,如小米2

对于按钮类还有个办法,不使用a或者input标签,直接用div标签

参考《 如何去除android上a标签产生的边框 》

9、WP系统a、input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight" content="no"> 10、webkit表单元素的默认外观怎么重置 .css{ -webkit-appearance:none; } 11、webkit表单输入框placeholder的颜色值能改变么

答案是可以的,如下

input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;} 12、webkit表单输入框placeholder的文字能换行么

ios可以,android不行~

在textarea标签下都可以换行~

13、IE10(winphone8)表单元素默认外观如何重置

禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改,有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand { display: none; }

禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改,同样有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{ display: none; }

禁用PC 端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮,::-ms-clear 适用于该清除按钮的修改,同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{ display: none; } 14、禁止iOS长按时触发系统的菜单,禁止iOS&android长按时下载图片 .css{-webkit-touch-callout: none} 15、禁止iOS和android用户选中文字 .css{-webkit-user-select:none}

参考《 如何改变表单元素的外观(for Webkit and IE10) 》

16、打电话发短信写邮件怎么实现

打电话

<href="tel:0755-10086">打电话给:0755-10086</a>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zggfyd.html