前端疑难杂症(不只是前端内容)

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

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

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

解决:

#app {
  width: 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: 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,
                        width: 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,
                        width: 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中的前端疑难杂症(不只是前端内容)_第1张图片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:\Windows\System32\drivers\etc

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,清除即可;
前端疑难杂症(不只是前端内容)_第2张图片

 

 前端疑难杂症(不只是前端内容)_第3张图片

 

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

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

  var htmlScrollHeight = $(document).scrollTop();
    $('input').blur(function () {
        //输入框失去焦点时,使页面滚动条到顶部的高度恢复到初始值,页面就会滑动下来
        $('html,body').animate({ scrollTop: htmlScrollHeight }, 1000);
    });

 

你可能感兴趣的:(前端疑难杂症(不只是前端内容))