방문자가 작은 화면을 사용하는 경우 내 웹 사이트의 글꼴을 더 크게 만들고 싶습니다. jquery없이 이상적으로, 페이지로드에서이 작업을 초기에 수행하고 싶습니다. 나중에로드 할 때까지 jquery를로드하지 않으려 고합니다.자바 스크립트 (또는 CSS)로 작은 (모바일) 화면 감지
가장 좋은 것은 화면 크기를 확인하는 것입니다. 그러나 이것은 완벽하지 않습니다. iphone4는 비교적 큰 크기지만 작은 화면을 가지고 있지만 일부 오래된 넷북은 작은 해상도이지만 큰 화면을 가질 수 있습니다. 내가 정말로 원하는 것은 화면 "DPI"의 변형입니다.
"작은 화면에서이 작업을 수행하십시오. 그렇지 않으면 큰 화면에서 수행 할 것"이라는 CSS 방법이 있으면 해당 작업도 가능합니다.
CSS2에는 media 속성이 있고 CSS3에는 media queries을 사용할 수 있습니다. 모든 브라우저에서 지원되는 것은 아니지만 iPhone 등의 소형 장치가 지원하므로 사용하는 것이 좋습니다.
@media screen and (min-width: 781px) and (max-width: 840px) {
body {
font-size: 13px;
}
}
미디어 쿼리가 핵심이며 사용하기에 재미 있습니다.
http://jsfiddle.net/neebz/kn7y3/을 참조하고 '결과'패널의 너비/높이를 변경하여 제대로 작동하는지 확인하십시오. media`은 CSS 2에 나타납니다 @http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/
',하지만 (당신이 사용하는) 미디어 쿼리는 CSS 3에 – Quentin
좋은 지적 새로운 :
예에서 촬영! 나는 내 대답을 업데이트하고있다. –
작은 가로 뷰포트 해상도는 데스크톱 브라우저의 크기를 조정할 수있는 작은 (모바일) 화면의 신뢰할 수있는 표시가 아닙니다. –