Firefox에서 CSS 미디어 쿼리에 문제가 있습니다. 그것은 두 개의 DIV를 만들고 스크롤바를 원하는 것처럼 Chrome에서 올바로 작동합니다. firefox 800px의 화면 크기를 줄이면 DIV가 모두 접히고 일부 픽셀 미디어 쿼리가 작동하지만 크롬에서는 발생하지 않습니다.CSS 미디어 쿼리 관련 문제 (스크롤바)
체크 http://jsfiddle.net/RMvqC/2/
파이어 폭스 & 웹킷 기반 브라우저는 다르게 스크롤바 렌더링이 바이올린. Firefox에서 MediaQuery는 화면 너비와 함께 15px 인 스크롤바 너비를 고려했지만 Webkit 기반 브라우저에서는 화면 너비가있는 스크롤바로 간주되지 않습니다. 그렇기 때문에 부동 소수점 DIV가 Firefox에서 축소 된 것입니다.
나는 CSS를 사용하여 몇 가지 작업을 수행했다. CSS를 해킹을 사용하여 아주 쉽게
html {
/* force scrollbars */
height: 101%;
}
body {
margin: 0;
padding:0;
white-space:nowrap;
}
#box1,
#box2 {
display:inline-block;
width: 400px;
height: 200px;
vertical-align:top;
white-space:normal;
}
#box1 {
background: #ce0000;
margin-right:-5px;
}
#box2 {
background: #8e0000;
}
@media screen and (max-width: 799px) {
body {
white-space:normal;
}
#box1,
#box2 {
width: 300px;
}
}
를 이러한 고통, 이것이 프런트 엔드가 가끔/대부분의 시간을 싫어하는 이유입니다. –
크롬 이후에는 생각이 달라졌습니다. 스크롤 막대는 이제 미디어 쿼리 계산과 관련하여 페이지 너비에 포함됩니다. –
당신은 파이어 폭스를위한 솔루션을 구현할 수 있습니다 (this fiddle 확인). 추가 <div>에 콘텐츠를 포장 한 후 귀하의 CSS에이 줄을 추가
/* Firefox-Hack */
body, x:-moz-any-link {
overflow-x: hidden;
}
#wrapper, x:-moz-any-link {
margin: 0 -7.5px;
}
이 확인 jsbin (jsfiddle 지금 다운)
가 다른 미디어 쿼리를 추가 할 수 있습니다 풍부한 반응 경험이 : another jsbin
를CSS의 해킹이 paulirish.com에서 발견 된
파이어 폭스 & 오페라는 의대에서 스크롤 폭을 포함하는 것입니다 W3C 사양을 다음과 ia 쿼리 너비 (a comment here에 설명 된대로 무한 루프를 피할 수있는 이유가 될 수 있음), Webkit은 그렇지 않습니다.
해결 방법이 있습니다 (FF로만 테스트했습니다) , 분명히 스크롤바가 항상 보이도록 강제하면, 너비가 이제 Webkit과 일치하게됩니다. 여기 코드는 다음과 같습니다
html
{
overflow:hidden;
height:100%;
}
body
{
position:relative;
overflow-y:scroll;
height:100%;
-webkit-overflow-scrolling:touch; /* So iOS Safari gets the inertia & rubber-band effect */
}
당신이 오페라는, 당신은 CSS 해킹에 의지 할 수 FF &에이를 적용 할 경우
그것은 말할 것도 없다/* Firefox */
@-moz-document url-prefix()
{
html
{
overflow:hidden;
height:100%;
}
body
{
position:relative;
overflow-y:scroll;
height:100%;
/*-webkit-overflow-scrolling:touch;*/
}
}
/* Opera */
x:-o-prefocus, html
{
overflow:hidden;
height:100%;
}
x:-o-prefocus, body
{
position:relative;
overflow-y:scroll;
height:100%;
}
,주의해야 할 점이 스크롤을 볼 수있다 항상 괜찮은 타협이 될 수 있습니다.
나는이 문제를 내 프로젝트의 헤드에서 "mqGenie"자바 스크립트를 호출하여 해결했습니다.
이제 내 미디어 검색어의 너비가 크롬, 사파리, 파이어 폭스, IE에서 스크 롤바 포함 여부에 관계없이 동일하게 적용됩니다.
이 자바 스크립트는 스크롤바 너비가 뷰포트 너비에 포함되어있어 원하는 크기로 실행되도록 브라우저에서 CSS 미디어 쿼리를 조정합니다.
이 URL에서 다운로드 할 수 있습니다 :
이 말초 관련,하지만 내가 할 필요없이 브라우저가 실제로 어떤 주어진 순간에 사용되는 미디어 쿼리를 감지하는 방법을 발견 스크롤바와 몸체 너비가있는 주변 ...
기본적으로 절대적으로 위치한 1-x-1 픽셀 크기의 목록을 본문의 어딘가에 정의하고 "감시 가능"하려는 각 미디어 쿼리 조건에 대한 목록 항목을 정의하십시오.
그런 다음 각 미디어 쿼리 정의에서 해당 목록 항목을 표시하거나 숨긴 다음 해당 항목이 스크립트에서 볼 수 있는지 여부를 간단히 확인하십시오.
예 :
<body>
...
<ul id="mediaQueryHelper">
<li id="desktop"></li>
</ul>
</body>
<style type="text/less">
#mediaQueryHelper {
position: absolute;
height: 1px;
width: 1px;
visibility: hidden;
top: -999px;
left: -999px;
}
@media screen and (min-width: 481px)
{
#desktop { display: inline; }
}
@media screen and (min-width: 320px) and (max-width: 480px)
{
#desktop{ display: none; }
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
var _desktop = $("#desktop");
$(window).resize(function() {
console.log("media-query mode: " + _desktop.is(":visible") ? "DESKTOP" : "MOBILE");
});
});
</script>
+1 나는 또한 내가 @media 모두와'같은 미디어 쿼리에 대한 죽일 것 같은 문제 – sandeep
향 (최대 폭 : 계산치 (980 픽셀 + 스크롤 폭))' – mm201