##一.문제 배경
이 요구사항은 조금 이상합니다. 모바일 지원의 최선책은 전용 모바일 사이트를 구축하고, 서버 측에서 UA 검출을 수행하여 해당하는 콘텐츠를 반환하는 것입니다
P.S. 모바일适配方案에 대한 자세한 정보는 [CSS 进阶篇 二.모바일 브라우저 지원 방법](/articles/css 进阶篇/#articleHeader2) 참조
장면:PC 사이트는 이미 구축되었고 HTML 구조를 변경할 계획이 없어 mobile first 원칙은 적용할 수 없습니다
P.S. 실제 장면은 CSS 규범 번역이 완료되었고, 아마도 앞으로는 휴대폰으로 볼 일이 많을 것 같아, 미디어 쿼리를 통해 휴대폰 표시에适配하고 싶습니다. 모바일 기기에 대해서만 레이아웃을 조정하고, 미디어 쿼리 매칭 목표는모바일 기기입니다 (여기서는 특히 휴대폰을 지칭하며, 가로화면 세로화면은 묻지 않음)
##二.선택 가능한 방안
###1.breakpoints
가장 일반적인 방법으로, 화면 폭 (CSS 픽셀로 기술된 폭) 을 통해 각종 기기를 구분합니다. 다음과 같습니다:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
/* 另外 */
min-width: 480px: Will target mobile devices in landscape mode and up
위 내용은 stackwoverflow 2011 년 답변 에서 발췌했습니다
2011 년을 강조한 것은 사고를 유발하기 위함입니다: 당시 휴대폰 화면 해상도는 작았고, Retina 화면 같은 것도 없었습니다. 그렇다면, 현재 이러한 미디어 쿼리 규칙은 아직 유효할까요?
다시 말해, 왜 max-width: 480px 가 1080x1920px 의 대형 화면 휴대폰에 매칭될까요?
핵심은 이 2 개의 px 가같은 것이 아니라는것으로, 전자는 CSS 픽셀, 후자는 물리 픽셀입니다. iPhone6p 및 거대 화면 삼성을 포함한 모든 휴대폰의 CSS 픽셀 폭은 320px 에서 480px 사이에 있습니다. 물론, 이러한 쿼리 규칙을 사용하는 전제는 viewport meta 를 설정하는 것입니다:
<meta name="viewport" content="width=device-width"/>
레이아웃 뷰포트 폭을 CSS 픽셀 폭으로 설정하므로, 초고해상도 전투기를 걱정할 필요는 없습니다. Retina 화면에 대해서는, 애초에 우리의 목표 (모바일 기기 구분) 와 관계가 없습니다. 3 개의 뷰포트와 Retina 화면에 대한 자세한 설명은 [완전히 이해 px,dpr,dpi,dip](/articles/完全理解 px-dpr-dpi-dip/) 참조
P.S. Moto 360 Watch 의 CSS 픽셀 폭은 218px 에서 281px 입니다.总之, 시계는 320px 를 초과하지 않습니다. 그들은 고의로 혼란을 제조하지는 않을 것입니다
###2.touch 이벤트
일종의 取巧한 방법으로, 다음과 같습니다:
<script type="text/javascript">
//detect if browser supports touch
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device){
$('body').addClass('touchDevice');
}else{
$('body').addClass('notTouch');
};
</script>
모바일 기기 === touch 이벤트를 지원 이라고 가정하면, 호환성 문제가 존재할 가능성이 있지만, 심각하지는 않습니다 (예를 들어 IE 는 없어도 괜찮습니다)
###3.기기 특성
화면의 폭 및 DPR 을 통해 각 기기를 구분합니다. 예를 들어 iPhone6:
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
더 많은 기기에 해당하는 쿼리 규칙은 Media Queries for Standard Devices 참조
P.S. 이 방안은 우리의 문제를很好地 해결하지는 못하지만, 錦上添花에 사용할 수 있습니다 (특정 기기에 대해 처리 수행, 예를 들어 Retina 화면에 특별한 대우 제공)
##三.결론
방안 1 의 breakpoints 를 채택했습니다. 구체적으로는 다음과 같습니다:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
위 코드는 CSS Media Queries For Mobile Devices 에서 발췌했습니다
실제, 결론만 본다면, 우리는 다른 방안을 찾을 필요가 전혀 없습니다. 이 가장 간단한 방법이 가장 효과적입니다
하지만, 원리가 관련된 것은 비교적 많습니다:3 개의 뷰포트, DPR, DPI, CSS 픽셀, 물리 픽셀 등
불명한 사람은 반드시 고해상도 전투기와 Retina 화면에 대해心存疑虑를 가질 것입니다. 타인의 답변 을 인용합니다:
What makes you think media queries won't work?
Apparently, Galaxy S4's CSS pixel ratio is 3.0, therefore, while its physical resolution is 1080x1920, its CSS resolution is still 360x640 - similar to Galaxy S3.
There are also media queries that test for pixel density. They may help you to serve high-res pictures or vector graphics to hi-dpi devices.
http://en.wikipedia.org/wiki/List\_of\_displays\_by\_pixel\_density#Samsung
Plus, take a look at this article:
Awesome database of screen specifications
P.S. 영어를 보는 것이 더 사람을信服시키기 쉽죠, 왜일까요?
##四.주의사항
CSS 규범에 미디어 쿼리 사용时发现:
微信内置浏览器不支持
@media (min-device-width : 320px)
需要修改 html meta
width=device-width再用
@media (min-width:480px)
매우 隐晦한 문제이므로, 절대로min-device-width 를 사용하지 마십시오. 일견 省事로 보이지만
###참고 자료
모든 링크는 상문에 있습니다.另外, 강력하게 [완전히 이해 px,dpr,dpi,dip](/articles/完全理解 px-dpr-dpi-dip/) 보기를 권장합니다. 확실히 득을 봅니다
아직 댓글이 없습니다