为什么 firefox/chrome 响应式仿真和智能手机之间有区别？

Question

我正在使用 Firefox 和 Chrome 开发响应式网页。在这两种浏览器上，我都将 css 更改为在屏幕尺寸低于 770 像素时将元素向左浮动。他们的两种响应模式都让我确认它的行为与预期一致，仅在该尺寸以下向左浮动。

但是当我使用我的5英寸（720 x 1280）屏幕华为P8时，元素没有向左浮动。

scss

@include bp(max-width, 770px) {
    .products-list .price {
        float: left;
    }

css

@media only screen and (max-width: 770px)
.products-list .price {
    float: left;
 }

html

<ul class="products-list">
<li class="items">
    <div class="product-info">
        <div class="left-product">
                <div class="price">
                    <span class="reg-price">
                                        <span class="price">00</span>

为什么会这样？

Answer 1

为确保不是缓存问题，请尝试使用 Chrome（对于 android）或 Safari（对于 iOS）内置的移动设备检查器通过 USB 检查移动浏览器.这种事经常发生在我身上。当我检查设备时，有时页面正在使用旧的缓存样式表。

https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging

为什么 firefox/chrome 响应式仿真和智能手机之间有区别？

why the difference between firefox/chrome responsive emulation and a smartphone?

css

google-chrome-devtools

responsive-design

firefox-developer-tools