getBoundingRect 还有devicePixelRadio 为啥带有小数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
    <title>视口的变化  viewport</title>
    <style>
        /* css reset */
        *{  
            margin: 0;
            padding:0;
        }
        body{
            background-color:#eee;
            font-size: 12px;
            color:#5d655b;
        }
        a{
            font-size:12px;
            color: #686868;
            text-decoration: none;
            /* 只适应于IOS ipad  点击链接  有半透明的效果*/
            -webkit-tap-highlight-color:transparent;
        }   
        img{
            width:100%;
            border: none;
            vertical-align: top;
        }

        /* recommend */
        .recommend-item{
            /* ****** */
            width: 200px;
            background-color:#fff;
            box-shadow: 0 1px 1px 0  rgba(0, 0, 0, 0.12);
        }
        .recommend-link{
            /* 让它变成像div p 一样自由属性 */
            display: block;
            width:100%;
            height:100%;
        }
        .recommend-pic{
            width:100%;
            margin-bottom:8px;
        }
        .recommend-name,
        .recommend-origPrice,
        .recommend-info {
            padding: 0 10px;
            margin-bottom: 8px;
        }
        .recommend-origPrice {
            color: #ccc;
        }
        .recommend-info{
            /* 弹性盒子模型 */
            display:flex;
            /* 各行之间留有空白的容器内 */
            justify-content: space-between;
            align-items: center;
        }
        .recommend-price {
            color: #e61414;
        }
        .recommend-price-num {
            font-size: 20px;
        }
        .recommend-count {
            color: #999;
        }
        .text-ellipsis{
            /* 多余的内容隐藏 */
            overflow:hidden;
            /* 隐藏剪切的内容*/
            text-overflow:ellipsis;
            /* 文本不换行的意思 */
            white-space:nowrap;
        }
    </style>
</head>
<body>
    <div class="recommend-item">
        <!-- 让整个屏幕  都会显示小手的形状 -->
        <a href="#" class="recommend-link">
            <p class="recommend-pic">
                <!-- 放入图片 -->
                <img src="./images/2.2-1.jpg" alt="recommend" class="recommend-img">
            </p>
            <!-- title -->
            <p class="recommend-name  text-ellipsis">欧派整体橱柜定制简约现代</p>
            <!-- container -->
            <p class="recommend-origPrice">
                <del>¥2000.00</del>
            </p>
            <p class="recommend-info">
                <span class="recommend-price">¥<strong class="recommend-price-num">1000</strong></span>
                <span class="recommend-count">985件已售</span>
            </p>
        </a>
    </div>
    <script>
        console.log(window.innerWidth);
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.getBoundingClientRect().width);
        console.log(window.devicePixelRatio);
    </script>
</body>
</html>

再坚持坚持一下 2020-03-08

源自：移动Web开发入门 2-6 视口-viewport（2）

收起

2回答

好帮手慕码 2020-03-08 19:23:17

同学你好，老师又测试一下，还是没有小数点的：

而且浏览器也没有配置过。可能是浏览器解析的问题，同学可以换一个浏览器试一下。不过一般是不会取小数点后面的内容，直接截掉的，可以不用纠结。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者再坚持坚持一下 #1

在其他的浏览器，结果还是带小数的，我在火狐上面测试了，第三个值还是有小数点getBoundingClientRect() 375.33331298828125

2020-03-08 20:06:03
提问者再坚持坚持一下 #2

不纠结了

2020-03-08 20:06:18