1
Firefox와 Chrome을 사용하여 반응 형 웹 페이지를 개발하고 있습니다. 두 브라우저 모두 화면 크기가 770px 미만일 때 왼쪽으로 요소를 띄우기 위해 CSS를 변경했습니다. 두 반응 모드를 통해 예측 한대로 동작하는지 확인할 수 있으며, 그 크기보다 왼쪽으로만 떠 있습니다.firefox/chrome 응답 에뮬레이션과 스마트 폰의 차이점은 무엇입니까?
그러나 내 5 인치 (720 x 1280) 화면 화웨이 P8을 사용하면 요소가 왼쪽으로 떠 있지 않습니다.
하는 SCS
@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 및 마크 업에 따라 다릅니다. 페이지 전체가 아닌 관련 비트로 줄이십시오! –
어떤 장치를 사용하고 있습니까? 캐시 문제가 아닌지 확인하려면 usb를 통해 모바일 장치 용 검사기에 내장 된 Chrome (Android 용) 또는 Safari (iOS 용)를 사용하여 모바일 브라우저를 검사 해보세요. 이것은 나에게 많이 일어난다. 장치를 검사 할 때 페이지에 오래된 캐시 된 스타일 시트가 사용되는 경우가 있습니다. –