标签:
IOS6上移除某元素请用removeChild(),而不能用remove()。remove()在IOS7之后才得到支持。
eg:
chileNode.parentNode.removeChild(childNode); //both ok
childNode.remove(); //ios7+
新版微信安卓版使用的QQ浏览器X5内核,如果页面上有手机号,浏览器会自动给这个手机号外加一个a标签,在处理样式时要给这个a标签预留样式。目前主要表现在小米3与小米4上。(又或者这个a标签是小米的ROM给加上的,而与X5内核无关。)
eg:
style:
#phone{xxxx}
#phone a{display:inline-block;width:80px;xxxxxxxxxx} /*this style is important*/
html:
<div id="phone">
<a faketel="13000000102" style="text-decoration:none;color:xxxxxx">13000000102</a>
</div>
新版微信安卓版使用QQ浏览器X5内核的原因,userAgent在微信中也会包含MQQBrowser字符,但是在微信中的MicroMessenger这个标识符是还存在的。所以要用userAgent来判断当前的浏览器的话,示例如下
qq browser:
if(useragent.indexOf("MQQBrowser")!=-1 && useragent.indexOf("MicroMessagener")==-1){
console.log("this is QQ browser");
}
webchat browser:
if(useragent.indexOf("MicroMessagener")!=-1){
console.log("this is webchat browser");
}
动态用js设置元素的backgroundImage的一个小坑,比如在CSS中已经给元素div设置了background-image,且同时设置了background-size
div{
background-image:url(‘xxxxx.png‘);
background-size:320px;
}
然后因为业务的需要,需要用js动态的来改变div的背景图片,这时候background-size是不会被继承的,所以如果改变背景后backgroundsize不是默认的话必须要重新配置。
div.style.backgroundImage="url(‘abcefg.png‘)";
div.style.backgroundSize="320px";
页面中js动态的给元素加上背景图片,如以下方式
var bg="";
div.style.backgroundImage="url(‘"+bg+"‘)";
如果这个路径为变量,且有可能为空串,一定要做验证,如果把空串传到url中,会重复发一次当前页面url的请求,每个DOM元素都会有一个baseURI的属性,该属性指向当前页面的url。
此处另外一个点在于,background-image:url()这个CSS属性或在js设计backgroundImage时url这个方法中的图片路径是否需要加引号?答案是必须加,从两个方面来说。
5.1 安全考虑。如果不加容易被xss 因为""意味着是字符串...但是不加引号的话..传过来的万一是url("http://www.xss.xss") 就把cookie什么的可能泄露出去了...
5.2 CSS规范中就要求加上引号,还有一个问题就是在使用LESS时,可能会要用到LESS的变量,如果不加引号在使用LESSC编译成CSS文件时,LESS变量不会被编译为正确的图片路径.
5.3 最后总结就是,不要给background-img:url()以及img的src属性设置空值,不然会多一个当前url的无用请求.
关于windows.screen.height与window.innerHeight(这一块可以再详细描述)
windows.screen.width
windows.screen.height
上面这两个属性多数的内核下表示当前屏幕的宽高
但是!!!!!!安卓部分机型上这个高度就明显的不准确,都猜不透它到底是怎么算的。
然后要屏幕的高度时请使用window.outerHeight,这个属性支持绝大多数的浏览器
还有一个属性是window.innerHeight,这个值不包含工具条,滚动条的高度
关于android下的圆角问题
安卓下图片如果只在父容器上使用border-radius:50%;部分机型上会有问题,图片不会被圆角,还是方的且会伸出父窗口的圆角外。
解决方案:
div{
border-radius:50%;
overflow:hidden;
border:0.5rem solid rgba(0,0,0,0.8);
z-index:2;
}
img{
border-radius:50%;
z-index:1;
}
IOS上没有这个问题。如果图片圆形还要有一个外边框的话,就一定要把边框放在父容器上。如果把border跟border-radius都放在图片上,部分安卓机器的问题就是图片还是不会成圆形,会跟边框合在一起成为一个圆形。
各屏幕适配的问题
做屏幕适配时常用的方法是CSS3的media query,这种方案的缺点在于CSS代码会比较冗余,然后对于不同尺寸的屏幕覆盖不够。为了代码能够更简洁,更方便维护,所以选择用rem.以iphone4的屏幕宽度做为一个标准,然后用js来算出当前屏幕适合1rem=XX px.
代码如下:
var docuH = document.documentElement.clientHeight,
docuW = document.documentElement.clientWidth,
html = document.getElementsByTagName(‘html‘)[0];
var num = docuW / 320;
html.style.fontSize = 12 * num + "px";
rem就是以html根结点做为基准,rem是一个相对的单位而不是绝对单位,在html设置1rem=xx px表示设置当前CSS文档流中1rem的默认值。
至于为什么要用320(iphone4)的尺寸来做为一个标准,这个不是标准,也可以用iphone6的屏幕宽度来做为根据,就看要用哪个尺寸来做这个1rem的标准了。不过个人推荐使用320的尺寸,因为移动端最小字号为12px(这个是多数情况下),如果用iphone6的来做1rem的标准,在iphone4上得出来的结果是1rem会小于12px,虽然多数机器在小于12px时也会显示12px,但是!!!!!!!!!我就遇到过安卓机器上能显示小于12px的字体。在移动端小于12px的字体对于阅读是影响很大的。
标签:
原文地址:http://www.cnblogs.com/lucifer-shun/p/5849271.html