为啥 firefox/chrome 响应式仿真和智能手机之间的区别？

Posted 2023-03-07

【中文标题】为啥 firefox/chrome 响应式仿真和智能手机之间的区别？

【英文标题】：why the difference between firefox/chrome responsive emulation and a smartphone?为什么 firefox/chrome 响应式仿真和智能手机之间的区别？

【发布时间】：2016-11-10 07:29:50

【问题描述】：

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

但是当我使用我的 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">$1000</span>

为什么会这样？

【问题讨论】：

你能展示你的代码吗？

像素比？ css-tricks.com/snippets/css/retina-display-media-query - 还有，什么设备？另外，您是否使用任何 CSS 来确保您的媒体查询触发？ （例如，显示/隐藏 770 大小的元素，或放置明显的边框等）？最后 - 取决于您的 CSS 和标记。请减少到相关部分，而不是整个页面！

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

@LuisRivera 是的，它与缓存有关，谢谢，您可以将其发布为回复，我会接受它

很高兴它有帮助！我发布了答案。谢谢

【参考方案1】：

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

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