页面小知识

以下内容来自http://www.daqianduan.com/6281.html,谢谢前辈们的分享

1.ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

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

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

2.部分android系统中元素被点击时产生的边框怎么去掉

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

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}

-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符

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

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

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

3.webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}

4.webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

5.webkit表单输入框placeholder的文字能换行么

ios可以,android不行~

在textarea标签下都可以换行~

6.禁用 select 默认下拉箭头

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

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

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

当表单文本输入框输入内容后会显示文本清除按钮,

::-ms-clear 适用于该清除按钮的修改,同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear
{
display: none;
}

8.禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

9.禁止ios和android用户选中文字

.css{-webkit-user-select:none}

10.打电话发短信写邮件怎么实现

打电话

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

发短信,winphone系统无效

<a href="sms:10086">发短信给: 10086</a>

写邮件,可参考《移动web页面给用户发送邮件的方法

<a href="mailto:[email protected]">[email protected]</a>

11.模拟按钮hover效果

移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">按钮</div>

<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>
</body>
</html>

12.屏幕旋转的事件和样式

事件

window.orientation,取值:正负90表示横屏模式、0和180表现为竖屏模式;

window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("横屏:" + window.orientation);
case 0:
case 180:
alert("竖屏:" + window.orientation);
break;
}
}

样式

//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}

//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}

13.audio元素和video元素在ios和andriod中无法自动播放

$(‘html‘).one(‘touchstart‘,function(){
audio.play()
})

可参考《无法自动播放的audio元素

14.摇一摇功能

HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

15.手机拍照和上传图片

<input type=”file”>的accept 属性

<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">

使用总结:

ios 有拍照、录像、选取本地图片功能

部分android只有选取本地图片功能

winphone不支持

input控件默认外观丑陋

16.微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整

原因

android侧是复写了layoutinflater 对textview做了统一处理

ios侧是修改了body.style.webkitTextSizeAdjust值

解决方案:

android使用以下代码,该接口只在微信浏览器下有效(感谢jationhuang同学提供):

/**
* 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
* 但是会有一个1秒左右的延迟,期间可以考虑通过loading展示
* 仅供参考
*/
(function(){
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke(‘setFontSizeCallback‘,{"fontSize":0}, function(res) {
alert(JSON.stringify(res));
});
},0);
});
} else {
setTimeout(function(){
WeixinJSBridge.invoke(‘setFontSizeCallback‘,{"fontSize":0}, function(res) {
alert(JSON.stringify(res));
});
},0);
}
})();

ios使用-webkit-text-size-adjust禁止调整字体大小

body{-webkit-text-size-adjust: 100%!important;}

最好的解决方案:

整个页面用rem或者百分比布局

17.消除transition闪屏

.css{
/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-transform-style: preserve-3d;
/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
-webkit-backface-visibility: hidden;
}

开启硬件加速

解决页面闪白

保证动画流畅

.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

参考《用CSS开启硬件加速来提高网站性能

18.取消input在ios下,输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

19.android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

20.

android 2.3 bug

  • @-webkit-keyframes 需要以0%开始100%结束,0%的百分号不能去掉
  • after和before伪类无法使用动画animation
  • border-radius不支持%单位
  • translate百分比的写法和scale在一起会导致失效,例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

  • 三星 Galaxy S4中自带浏览器不支持border-radius缩写
  • 同时设置border-radius和背景色的时候,背景色会溢出到圆角以外部分
  • 部分手机(如三星),a链接支持鼠标:visited事件,也就是说链接访问后文字变为紫色
  • android无法同时播放多音频audio

参考《border-radius 移动之伤

设计高性能CSS3动画的几个要素

  • 尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
  • 利用translate3D开启GPU加速

参考《High Performance Animations

fixed bug

  • ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
  • android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
  • ios4下不支持position:fixed

解决方案

  • 可用isroll.js,暂无完美方案

参考

移动端web页面使用position:fixed问题总结

使用iScroll.js解决ios4下不支持position:fixed的问题

21.播放视频不全屏

<!--
1.ios7+支持自动播放
2.支持Airplay的设备(如:音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏
webkit-playsinline="true"
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
				
时间: 2024-11-26 09:55:27

页面小知识的相关文章

$Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数

一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候  表名小写_set.all()不知是哪个字段queryset对象  所以说related_name='coursedetail_by' 3 Vue生命周期钩子可以直接发axios 二 Vue样式用elemen(jq用bootstap) 网站http://element-cn.eleme.io/#/zh-CN/guide/design 1 em

12个css小知识

1.CSS的color属性并非只能用于文本显示对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方.它可以把页面上的所有的东西都变颜色.比如:无法显示的图片的alt文字list元素的边框无序list元素前面的小点有序list元素前面的数字还有hr元素 2.CSS里的visibility属性有个collapse属性值:collapse对于CSS里的visibility属性,相信你用过不下

excel 小知识-------第一章

如何修改excel默认的字体: office 2007方式:  "页面布局"----"主题"------"有文字的那个按钮"如下图所示: 2.设置 表格边框 方式: 在"单元格"点击"右键"---"设置单元格格式"-----"边框"如下图所示: 3. excel 小知识-------第一章,布布扣,bubuko.com

你不一定知道的几个前端小知识

1 大家都知道js在进行小数运算时会有丢失精度问题(其他语言也是),比如: 0.1+0.2 //0.30000000000000004 有一种比较快捷的方式是先把小数乘以10的整数倍,然后再运算,如: (0.1*10+0.2*10)/10 //0.3 但是这种方式也不是100%准确的,乘以整百也可能精度丢失,比如: 2177.74*100 //217773.99999999997 所以常用的几种处理方式有: 把小数转化为字符串,拆分整数部分和小数部分分别计算,然后再把结果进行拼接; 先乘10的整

学习javascript总结下来的性能优化的小知识(二)

上面一篇文章大致介绍了一些javascript当中使用的一些小技巧,当下这篇文章继续介绍一下内存管理.松散耦合.性能方面的一些小知识.为避免错误应该注意的点 内存管理 1.循环引用 如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露.内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放. 简单的循环引用: var el = document.getElementById('MyElement'); var func = function () { //

一点优化小知识

一直在学优化,在这过程中发现了建站的不少小知识哦,是不是大神们一直都知道啊.我换要努力学习呀 今天就谈一点关键字的小知识吧 一般页面关键字过多过少都不利于优化.页面两三个关键字就可以,小页面关键字出现两三次,打野面关键字出现四五次.这个看你怎样决定.一般文章也不用特别的在意关键字多少,顺理成章的写完一篇文章,关键字肯定会有展现,最好在文章前50--100字里关键字有体现.对于最后一点没有实践,其实想想,这就像写文章,开头好几百字看完了不知道主题是什么,这篇文章的阅读量肯定不咋样啊.关键字最好写在

JSP+Ajax网站开发小知识

一.JSP基础 1.<select  name="love"  size="3">其中的size属性指定了列表框显示选项的条数,如果所有选项多于这个数,将会出现滚动条. 2.addCookie(Cookie  cookie)方法将其放入客户端,获取Cookie对象可调用request对象的Cookie[]  getcookies()方法. Cookie   myCookie  =  new  Cookie("name",  "

京东案例小知识1

小知识 1.定位的盒子比浮动的盒子层级高 2.浮动的盒子遮挡不住标准流的文字 3.块级元素的宽 可以继承 4.A标签的文字属性不能继承 5.谷歌不支持12号以下的字体 6.div:hover a{}:鼠标放在div区域后,对于里面的a链接文字变色. 7.建议所以浮动的盒子都给宽高 (防止页面缩小的时候掉下里,在谷歌尝试) 最好给盒子之间有一定的间距 8.让盒子在父盒子水平居中,先定位,left50%:然后margin-left:子盒子宽度的一半 9.模拟鼠标小手(curp+tab) 10."co

12个你未必知道的CSS小知识

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方. 请注意,上面的代码里只使用了一个color属性,就是在body元素上,设置成了yellow.但是,你也看到了,所有这个页面上的东西都变成了黄色