开发项目遇到的大大小小问题总结

 

 

 1移动端输入六位密码 光标位置不对

解决办法，把它移到看不见的地方
input{
       text-indent: -999em;
       margin-left: -100%;
       width: 200%!important;
  }

2  textarea 文本域
    resize: none; //禁止放大
    overflow-y: hidden;  //进度条

3 遮罩层
.shelter{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    z-index: 10;
    display: none;
}

4 打电话,发短信
<a href="tel:0755-10086">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>


5  rem px 移动端适配问题
移动端字体单位font-size选择px仍是rem
　　对于只须要适配少部分手机设备，且分辨率对页面影响不大的，使用px便可
　　对于须要适配各类移动设备，使用rem，例如只须要适配iPhone和iPad等分辨率差异比较大的设备  
@media screen and (max-width: 321px) {
    body {
        font-size: 16px;
    }
}
@media screen and (min-width: 321px) and (max-width: 400px) {
    body {
        font-size: 17px;
    }
}
@media screen and (min-width: 400px) {
    body {
        font-size: 19px;
    }
}
<script>
    // px与rem单位的换算
    (function(){
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    })();
</script>

6 可输入的div
<--输入完后，准备点击肯定按钮回复-->
<div contenteditable="true" data-id="+result.id+" class="shopReply">回复买家</div>
<--已回复买家的评价-->
<div contenteditable="false" data-id="+result.id+" class="shopReply">谢谢您，咱们会更好的为您服务</div>

div上模拟placeholder
<div id="content" class="inputcontent needsclick" placeholder="有问题就尽管提问吧" contenteditable="true"></div>
<style>
.inputcontent:after {
            display: inline-block;
            width: 100%;
            color: #999;
            content: attr(placeholder);
        }
</style>


7 重定向
重定向是网页制做中的一个知识，几个例子跟你说明，假设你如今所处的位置是一个论坛的登陆页面，你填写了账号，密码，点击登录，若是你的账号密码正确，就自动跳转到论坛的首页，不正确就返回登陆页；这里的自动跳转，就是重定向的意思。或者能够说，重定向就是，在网页上设置一个约束条件，条件知足，就自动转入到其它网页、网址。
    window.location.href = 'goods_management.html?tab=audit';

8 input文本框输入数字时，小数点后面只保留2位
$('#goodsPrice').blur(function() {
    var money = $(this).val() - 0.0;
    $(this).val(money.toFixed(2));
});

9 刷新当前页面
window.location.reload()：    //刷新当前页面
<meta http-equiv="refresh" content="3600">   //1小时刷新一次

10  移动端 1px border 实现
部分安卓机器(好比小米)的分辨率低，若是border的宽度小于1px。安卓机出现一种边框消失了的现象。样式上有点奇怪，IOS没有这个问题。
因为设备高分辨率屏的缘由，逻辑像素的 1px 的 border 在移动设备上会用两个或三个物理像素来表示，因此看起来会感受很粗。解决方案有不少，但兼容性最好的方案是用伪元素的 box-shadow 或 border 实现 border，而后用 transform: scale(.5) 缩小到原来的一半

11  阻止旋转屏幕时自动调整字体大小
          * {
               -webkit-text-size-adjust: none;
           }
     禁止 iOS 识别长串数字为电话
          <meta name="format-detection" content="telephone=no" />
     input的placeholder会出现文本位置偏上的状况
           line-height：normal;

12 键盘
<input type="number" pattern="[0-9]*" />
<input type="password" pattern="[0-9]*" />
注意：只有number或者tel仍是不够，只有加入正则，ios才会出现九宫格

13  flex布局
display: flex;
display: -webkit-box;
display: -webkit-flex; 
注： 若是用flx布局必需要加，不加的话，ios版本为8的机子页面会错乱


进群免费领取资料哦~WEB前端互动交流群434623999