前端疑难杂症（不只是前端内容）

1.chrome 远程计算机或设备将不接受连接

解决：https://blog.csdn.net/man_zuo/article/details/82945850 可行

2.浏览器滚动条隐藏还可以滚动

解决：

#app {

100%;

height: 100%;

overflow-x: hidden;

}

#app::-webkit-scrollbar {

display: none;

}

3.页面中的div随着页面放大而放大，缩小及缩小

解决：

注意：需jq.js,变量fz_num 参数无用

<body>
    <div class="container">
        <div class="content">
            <div class="phone h5body" id="h5body">
                <div class="phone-app">
                    <iframe src="http://192.168.1.45:8080/" frameborder="0" style="overflow-y:hidden;"
                        class="h5body-container" id="h5body-container"></iframe>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    /**
     * 自适应手机屏幕高度
     * @type {[type]}
     */
    function resizePhone() {
        //兼容老版电脑
        //   $("#h5phone-fontsize").css("fontSize", "10px");
        var minwidth = 300,
            minheight = (minwidth + minwidth * 0.1) / 0.557;
        var fz_num = parseInt($("#h5phone-fontsize").css("fontSize"));
        if ($("body").hasClass("fullmode")) {
            var height = $(".content").height(),
                width = (height / 4) * 2.4;
            $("#h5body").css({
                 width,
                "margin-left": -width / 2
            });
            $(".container").height("100%");
        } else {
            if (+fz_num === 12 && $(".content").height() < minheight) {
                var paddingLeft = (paddingRight = minwidth * 0.05),
                    bgwidth = minwidth + 2 * paddingLeft,
                    bgheight = winHeight - 40,
                    paddingTop = 0.04 * bgheight,
                    paddingBottom = 0.16 * bgheight,
                    right = -23 + 0.001 * bgwidth,
                    h5body = {
                        height: bgheight - paddingTop - paddingBottom,
                         bgwidth - 2 * paddingLeft,
                        "margin-left": -bgwidth / 2,
                        padding: paddingTop +
                            "px " +
                            paddingRight +
                            "px " +
                            paddingBottom +
                            "px " +
                            paddingLeft +
                            "px "
                    };
                $(".container").height(bgheight);
            } else {
                var winHeight = $(".content").height(),
                    bgheight = winHeight - 0,
                    paddingTop = 0.052 * bgheight,
                    paddingBottom = 0.082 * bgheight,
                    bgwidth = 0.48 * bgheight,
                    paddingLeft = 0.055 * bgwidth,
                    paddingRight = 0.054 * bgwidth,
                    right = -23 + 0.001 * bgwidth,
                    h5body = {
                        height: bgheight - paddingBottom,
                         bgwidth - 2 * paddingLeft,
                        "margin-left": -bgwidth / 2,
                        padding: paddingTop +
                            "px " +
                            paddingRight +
                            "px " +
                            paddingBottom +
                            "px " +
                            paddingLeft +
                            "px ",
                        top: 120
                    };
                $(".container").height("100%");
            }
            $("#h5body")
                .css(h5body)
                .show();
        }
    }

    resizePhone();
    var resizeTimeout = null;
    $(window).resize(function () {
        if (resizeTimeout) {
            clearTimeout(resizeTimeout);
        }
        resizeTimeout = setTimeout(function () {
            resizePhone();
        }, 0);
    });</script>

4.根据设备不同，跳入不同的页面（pc跳pc页面，移动跳移动端页面）;

解决：
注意不要让页面出现白屏一闪的情况；
把相关js放到head里

(function () {
    var ua = navigator.userAgent.toLocaleLowerCase();
    var pf = navigator.platform.toLocaleLowerCase();
    var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf)) ||
        (/ucweb.*linux/i.test(ua));
    var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
    var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);

    var mobileType = {
        pc: !isAndroid && !isIOS && !isWinPhone,
        ios: isIOS,
        android: isAndroid,
        winPhone: isWinPhone
    };
    if (mobileType.pc) {
        window.location = "transverse/transverse.html"
    }

})();

　　通过chrome的检查工具network中的preserve log（保存日志，否则只显示每次响应的链接，页面刷新，请求记录不消失）

来记录页面显示时间；

同时学习一下network的小知识https://segmentfault.com/a/1190000012057767?utm_source=tag-newest
5.调试APP里的前端页面主要是为了查看页面跳转链接是否正确（host地址）

解决：下载一个代理软件，本人用的是Fiddler；
使用教程：https://www.cnblogs.com/woaixuexi9999/p/9247705.html；

本地配置：C:WindowsSystem32driversetc

6.苹果浏览器对时间转换中不兼容

遇到new Date("2019-12-27 10:50:00:000")打印不出来

解决把-改为/，并且去掉毫秒：

new Date("2019/12/27 10:50:00");

7.清除接口连接ip地址缓存：（chrome）

注意本地hosts ip地址后的域名不可过长，可能会失效

打开浏览器chrome://net-internals/#sockets,清除即可；

8.h5页面在ios7p，8p...情况下键盘收回后会留下空白

解决：记录初始化页面的记录页面初始滚动条到顶部的高度

　　var htmlScrollHeight = $(document).scrollTop();

$('input').blur(function () {

//输入框失去焦点时，使页面滚动条到顶部的高度恢复到初始值，页面就会滑动下来

$('html,body').animate({ scrollTop: htmlScrollHeight }, 1000);

});