CSS 미디어 - 화면 폭은

CSS를CSS 미디어 - 화면 폭은

html{ 
    overflow-y:scroll; 
    }

JS 크롬에서

function showW(){ 
    var a=($(window).width()); 
    $('#show').html(a); 
}

결과 1009입니다 불일치. Firefox의 결과는 1007입니다. 왜? 진실은 무엇입니까?

width()을 outerWidth()으로 바꾸려고했지만 결과가 동일합니다.

는

@media only screen and (max-width:960px){...

이 945px (Chrome) 및 943px - Firefox에 실행합니다.

어쩌면, scrolbar는 15px (945 + 15 = 960)

내 디스플레이 설정 (XP의 승리)입니다 - 1024x768.

누군가이 불일치를 설명 할 수 있습니까?

최종 목표는 모든 브라우저에서 또는 적어도 Chrome과 Firefox에서 960 px (스크롤바 포함)의 CSS 미디어를 실제로 실행하는 것입니다.

출처

2014-04-03 bonaca

스크롤 막대로 인해 일치하지 않는 경우 최대 너비 960으로 무언가를 실행하려면 미디어 쿼리를 사용하십시오. js와 미디어 쿼리 너비를 동기화해야하는 경우 (다른 경우) CSS에서 CSS 규칙을 설정하고 js – Huangism

^^에서이를 확인할 수 있습니다. 브라우저가 렌더링되는 방식의 차이 때문에 너비가 달라집니다. 페이지 내용과 관련이 없지만 실제 브라우저 응용 프로그램 자체는 다릅니다. – Archer

@Huangism, 당신은 이렇게 말 했나요? 화면 너비는 Windows, jquery 및 CSS에 따라 다릅니 까? 그리고 css way가 유효한 경우, 960은 스크롤 바를 포함하거나 제외합니까? – bonaca

불일치는 스크롤 바 때문입니다. 이 예에서

봐 사용하여 스크롤 박스를 포함 후에는 상자 변경 색상을 볼 수 있습니다

http://jsfiddle.net/CU4Q6/

div { 
    background: green; 
    width: 300px 
} 

@media only screen and (max-width:300px){ 
    div { 
     background: red; 
    } 
}

미디어 쿼리. 따라서 미디어 쿼리는 스크롤바가있을 때 창 너비를 출력합니다. iPad에서 미디어 쿼리의 너비는 화면 크기입니다 (스크롤바 포함). 스크롤 막대가 나타날 때 너비가 변경되는 것을 원하지 않기 때문에 이는 의미가 있습니다. 그럴 경우 매우 가까운 두 너비로 사이트를 변경하는 미디어 쿼리를 가질 수 있기 때문입니다.

너비를 js에 대한 미디어 쿼리. 그런 다음 보이지 않는 요소 또는 시각적 요소 (무엇이든)에 CSS 규칙을 추가 한 다음 창 크기를 조정할 때 js를 사용하여 해당 CSS 속성을 검사 할 수 있습니다.

사람들은 이제 모든 종류의 다양한 장치를 사용하여 웹 페이지를 볼 수 있지만 정확한 너비를 타겟팅하는 것은 중요하지 않습니다.

출처

2014-04-03 17:59:57 Huangism

CSS 미디어 - 화면 폭은

답변

관련 문제