1
FirefoxとChromeを使用して反応性の高いWebページを作成しています。どちらのブラウザでも、画面サイズが770px未満の場合、要素を左に浮かせるようにCSSを変更しました。彼らの反応モードはどちらも、予想どおりに動作していることを確認することができます。なぜfirefox/chrome応答エミュレーションとスマートフォンの違い？
しかし、5インチ（720 x 1280）の画面Huawei 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>
これはなぜでしょうか？
コードを表示できますか？ – makshh
ピクセル比率？ https://css-tricks.com/snippets/css/retina-display-media-query/ - また、どのようなデバイスですか？また、あなたのメディアクエリーを起動させるためにCSSを使用していますか？ （例えば、要素を770サイズで表示/非表示、または明白なボーダーを配置するなど）？最後に、あなたのCSSとマークアップに依存します。ページ全体ではなく、関連するビットに減らしてください！ –
あなたはどのデバイスを使用していますか？キャッシュの問題ではないことを確認するには、モバイルブラウザ用のChrome（for Android）またはSafari（iOS用）を使用してモバイルブラウザのインスペクタを調べてみてください。これは私にはたくさん起こります。デバイスを検査するときに、ページが古いキャッシュされたスタイルシートを使用していることがあります。 –