1.移动端汉字正常自动换行,连续的数字和字母不自动换行的问题:
自动换行:
div{
word-wrap: break-word;
word-break: normal;
}
注:
(1).word-break:break-all:
例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长,它会把单词截断,变成该行末端为
conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了.
(2).word-wrap:break-word:
例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,
它会自动把整个单词放到下一行,而不会把单词截断掉的。
2.检测浏览器型号:
打印浏览器设备型号:
window.navigator.userAgent
function BrowserType(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
// var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isIE=window.ActiveXObject || "ActiveXObject" in window
// var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1&&!isEdge; //判断Chrome浏览器
if (isIE){
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(userAgent.indexOf('MSIE 6.0')!=-1){
return "IE6";
}else if(fIEVersion == 7)
{ return "IE7";}
else if(fIEVersion == 8)
{ return "IE8";}
else if(fIEVersion == 9)
{ return "IE9";}
else if(fIEVersion == 10)
{ return "IE10";}
else if(userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)){
return "IE11";
}
else
{ return "0"}//IE版本过低
}//isIE end
if (isFF) { return "FF";}
if (isOpera) { return "Opera";}
if (isSafari) { return "Safari";}
if (isChrome) { return "Chrome";}
if (isEdge) { return "Edge";}
}
//myBrowser() end
alert(BrowserType());
3.针对ios系统 获取屏幕安全距离的方法:
//屏幕上安全距离: safe-area-inset-top
//屏幕右安全距离: safe-area-inset-right
//屏幕下安全距离: safe-area-inset-bottom
//屏幕左安全距离: safe-area-inset-left
//ios11
padding-bottom: constant(safe-area-inset-bottom);
//ios11.2以上
padding-bottom: env(safe-area-inset-bottom);
//最终兼容性写法:
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);