为什么firefox/chrome响应仿真和智能手机之间的区别?
问题描述:
我使用Firefox和Chrome开发响应式网页。在两种浏览器上,当屏幕尺寸小于770像素时,我已将CSS更改为向左浮动。两种响应模式都允许我确认它的行为如预测的那样,只在该尺寸以下浮动到左侧。为什么firefox/chrome响应仿真和智能手机之间的区别?
但是当我使用我的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>
为什么会变成这样?
答
为确保不会发生缓存问题,请尝试使用适用于移动设备的Chrome浏览器(适用于Android)或Safari(适用于iOS)通过USB检查移动浏览器。这发生在我身上很多。当我检查设备时,有时页面正在使用旧的缓存样式表。
https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging
你能显示你的代码吗? – makshh
像素比例? https://css-tricks.com/snippets/css/retina-display-media-query/ - 还有,什么设备?另外,你是否使用任何CSS来确保你的媒体查询失败? (例如,显示/隐藏770尺寸的元素,或放置明显的边框等)?最后 - 取决于你的CSS和标记。请将它缩小到相关位,而不是整个页面! –
你正在使用哪种设备?为了确保不是缓存问题,请尝试使用适用于移动设备的Chrome浏览器(适用于Android)或Safari(适用于iOS),通过USB检查移动浏览器。这发生在我身上很多。当我检查设备时,有时页面正在使用旧的缓存样式表。 –