zoukankan      html  css  js  c++  java
  • 前端疑难杂症(不只是前端内容)

    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);
        });
  • 相关阅读:
    Android自定义属性,format详解
    设置EditText是否可编辑
    Android中Application设置全局变量以及传值
    android:ellipsize属性的含义
    Java集合框架List,Map,Set等全面介绍
    二十款漂亮的CSS字体样式,让你受用非浅
    IE浏览器不见了
    display属性值:
    用CSS设置多个背景、背景渐变、指定背景大小
    [转]IE6双倍边距——IE布局BUG集锦
  • 原文地址:https://www.cnblogs.com/zhaozhenghao/p/11463568.html