다른 장치에 대한 미디어 쿼리로 그립을 잡으려고합니다. 저의 새로운 Sony Xperia Z 모바일을 시험해 보았습니다. 고해상도로 인해 본격적인 사이트 형식으로 표시됩니다. 그리드 및 형식을 표준 모빌 축척과 같은 크기로 바꾸려면 미디어 쿼리를 어떻게 추가합니까? Xperia에서 글꼴은 너무 작아서 더 크게 표시해야합니다. 풀 사이즈 모니터 디스플레이처럼 작동하는 망막 장치에 문제가 있습니까?고해상도 모바일 1080px (Xperia Z 등)에 대한 미디어 쿼리
엑스 페리아 Z - 해상도 1920 × 1080, PPI 443
어떻게 이러한 장치에 대한 미디어 쿼리를 포함합니까?
이 코드 대상에게 동일한 화소 비율 모든 장치 실제로 필요한 것입니다. 여기
@media screen and (-webkit-device-pixel-ratio:3) {
body {font-size: 250%}
}
`@media 만 화면 (MAX-소자 폭 : 1920px) { /* 모바일 특정 스타일 이리 정의 */ }
@media only screen and (max-device-width: 640px) {
/* define mobile specific styles come here FOR I PHONE RETENA DISPLAY*/
}`
예, 그것은 문제가 될 것입니다 그들은 CSS을 위반할 것입니다. 그러나 -webkit-device-pixel-ratio이 효과가 있기 때문에 다른 것으로 인해 발생하는 것 같습니다.
당신은 아마 this를 생략 :
viewport 현대 "모바일"브라우저에서 사용 meta tag. (iOS/Safari, Android/Chrome, 모바일 Firefox, Opera). 개발자는 "이 제품은 제대로 디자인 된 웹 사이트이며 데스크톱 전용 크러스트가 아닙니다"라고 말합니다. 그것 없이는, 모바일 브라우저는 귀하의 웹 사이트가 960 픽셀 정도의 불특정 분폭으로 설계되었다고 가정합니다.
"픽셀"이라고 말하면 "CSS 픽셀"을 의미합니다. 우리는 CSS 픽셀이 한면에 3 개의 물리적 "장치 픽셀"임을 확인했습니다. 그리고 이것은 장치의 가장 큰 치수가 640 CSS 픽셀에서 작동한다는 것을 의미합니다. 이것은 960보다 훨씬 적으므로 뷰포트 메타 태그가없는 경우에 사용되는 "데스크톱"웹 페이지는 축소되기 시작합니다.
죄송합니다. 저는 초보자입니다. 메타 뷰포트 란 무엇입니까? 덕분에 –
내 대답 :)에있는 단어를 클릭 @DanielKellaway. 난 내 자신의 블로그 게시물을 연결하지만, 그것은뿐만 아니라 쿼크 모드에서 정규 설명을 통해 연결해야합니다. – sourcejedi
죄송합니다. 쿼크 모드 기사 [여기 (http://www.quirksmode.org/mobile/viewports.html)되어 [여기서 (http://www.quirksmode.org/mobile/viewports2.html) – sourcejedi
감사합니다. 훌륭한 작품입니다. –
왜 이것이 표시되어 있는지 궁금합니다. 설명은이 답변이 어떻게 개선 될 수 있는지 이해하는 데 도움이 될 것입니다. – Timidfriendly
@Timidfriendly 나는이 점을 낮추지 않았지만 몇 가지 이유가있을 수 있다고 생각한다. 1. WebKit 브라우저 만 대상으로하는 공급 업체별 '-webkit-'접두사. 오페라 (WebKit 으로의 전환이 또한'-o-'접두사가 쓸모 없다는 것을 의미하는지 확실하지 않음) Mozilla와 Internet Explorer는 이것으로 목표를 정하지 못했지만 모바일 구현도 가지고 있습니다. 2. "-webkit-min-device-pixel-ratio : 3"대신에 "min-resolution : 3dppx"(표준 방식)를 사용하는 것이 더 적절할 수 있습니다. 그 밖의 원인이 무엇인지 알지 못합니다. 매우 견고한 대답입니다. – omninonsense