前端常见问题

第一部分：Windows-phone兼容问题

一 、useragent及渠道判断

windows phone 10:

Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; WebView/3.0;Microsoft; RM-1116) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/13.10586

 

windows phone 8:

Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; WebView/3.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Nokia 920T) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537

 

surface：

Mozilla/5.0 (Windows NT 10.0; Win64; x64; WebView/3.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586

 

var _ua = navigator.userAgent,firstChannel,secondChannel;

    if(_ua.indexOf("LVMM")>-1 && _ua.indexOf("iPhone; CPU")>-1){

        firstChannel = "IPHONE";

        secondChannel = "AppStore";

    }else if(_ua.indexOf("LVMM")>-1 && _ua.indexOf("Android")>-1){

        firstChannel = "ANDROID";

        secondChannel = _ua.substring(_ua.indexOf("ANDROID_")+8, _ua.lastIndexOf("LVMM")-1);

    }else if(_ua.indexOf("LVMM")>-1 && _ua.indexOf("iPad; CPU OS")>-1){

        firstChannel = "IPAD";

        secondChannel = "AppStore";

    }else if(_ua.indexOf("Windows Phone")>-1 && _ua.indexOf("WebView")>-1){

        firstChannel = "WP";

        secondChannel = "WPStore";

    }else{

     firstChannel = "TOUCH";

     secondChannel = "LVMM";

    }

 

统计代码

  if(_ua.indexOf('Windows Phone')!=-1&&_ua.indexOf('WebView')!=-1){

//console.log(‘wp手机app’);APP_WP_出境游-境外玩乐}

 

-webkit-line-clamp

限制在一个块元素显示的文本的行数。

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

 

 

 

 

代码规范 

实现效果一行超出部分… ，css写法

           white-space: nowrap;

           text-overflow: ellipsis;

           overflow: hidden;

 

实现效果n行超出部分… ，css写法

          display: -webkit-box;

   line-height:  m

          -webkit-line-clamp: n;

          -webkit-box-orient: vertical;

  max-height: m*n+x+y；

注：x y 是可能存在的padding-top padding-bottom

   padding-top：x;

  padding-bottom: y;

 

 

 

第二部分：页面规范总结

必须考虑的点：    app中统一用app头部，浏览器中用H5头部；    是否已经压缩js、css；    是否已经使用minify合并js、css请求；    是否已经将js、css统一改成pic路径；    是否需要添加统计代码；    是否需要设置tdk；    是否需要使用cmsUtil插件将cms数据转换成完整链接；    是否在自测阶段覆盖到IOS大小屏手机、Andriod大小屏手机；可优化的点：    是否添加加载等待效果；    是否添加了图片懒加载功能（统一使用lazyLoad插件）；    是否将阻塞页面首屏展示的js、css放在页面底部；    是否需要将大图片更换为合适尺寸的图片（url中带“uploads”特征的图片，需要的话统一使用picUrl插件）

 

 

 

第三部分：css一些基础总结

1.两个元素在display：inline-block的情况下，中间会有空白现象(前提是没有浮动)，解决方法是：

在这两个元素的父元素上加上font-size:0。

 

2.IE6、7不兼容display：inline-block。解决方法是再加上zoom:1; *display:inline;

 

3.点击没有蓝框：

tap-highlight-color: rgba(0,0,0,0);

focus-ring-color: rgba(0, 0, 0, 0);

-webkit-tap-highlight-color: rgba(0,0,0,0);

-webkit-focus-ring-color: rgba(0, 0, 0, 0);

 

4.网页在快速滚动和回弹的原理:

overflow-y:scroll;

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

 

5.让div中可以输入文字内容

<div class="content" contenteditable="true"></div>

 

6.input文本框，初始里边有文字提示，当点击时，文字消失

<input type="text" placeholder=" " value=" ">

如果要修改输入框placeholder文字默认颜色

input::-webkit-input-placeholder{ color: red; }       

 

7.清除浮动有一种情况用overflow：hidden会有问题，价格会被盖住只显示一半，解决办法：

给浮动元素的父亲添加伪类 :after{ clear:both; content:''; display:block; width: 0; height: 0; visibility:hidden;}

 

8.清除 iOS 下 input 表单的阴影:-webkit-appearance: none;

 

 

9. 遮罩弹窗的内容里有input的时候，解决办法：

(1) 先获取到整个文档的高度

        $(function(){

            $(".弹窗").height($(document).height());

        })，

(2) 然后给遮罩层position: absolute，里面的内容position：fixed就可以了        

 

10. 双击或长按禁止复制全选，解决方法：

body{ -webkit-touch-callout:none; -webkit-user-select:none;}

 

11. 如果想选取<=x的元素，:nth-child(-n+x);

    如果想选取>=x的元素，:nth-child(n+x);

 

12. 要想滚动条消失::-webkit-scrollbar{ width:0; height:0; display: none;}

 

13.setFullYear(),setMonth(),setDate()的时候要注意他们三个的顺序，要按照日月年这样的顺序来set日期，不然会出现bug。

只要setMonth()的参数为小于31天的月份时就会变为下一个月。原因是：因为当前月份是31天，而设置的月份小于31天，就会把日期顺延

 

var date = new Date('2014-09-25') 在win Safari5及以下版本中会显示NAN 解决方法

var strTime='2011-04-16';

var date2= new Date(strTime.replace(/-/g, '/'));

 

微信返回问题修改

1. 把history.go(-1)改成this.location=document.referrer;

file-loader中publicPath表示是图片所在文件的路径，不是html的路径