응답 성은 모바일에서 다르게 작동합니까?

그냥 실험 목적을 위해, 나는 구성 media query 다음 :응답 성은 모바일에서 다르게 작동합니까?

@media only screen and (max-width: 600px) { 
     .fontresize { font-size: 3em; } 
    } 


    <table style="width: 100%;" border="0"> 
    <tbody> 
     <tr> 

     <td width="50%"><a href="food.html" class="fontresize">Food</a></td> 
     <td width="50%"><a href="candles.html" class="fontresize">Candles</a></td> 

     </tr> 
    </tbody> 
    </table>

내가 크롬 브라우저 윈도우의 폭을 축소 할 때 데스크톱 크롬에서 잘 작동합니다.

그러나, 다음이 상황에서 작동하지 않습니다

을 내 서버에 페이지를로드 및 세로 모드에서 내 아이폰 4S의 크롬 브라우저를 열 때.
Chrome에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택한 다음 개발 도구에서 '토글 장치'를 선택하고 다양한 휴대 전화 인물 사진 모드를 선택합니다. 이것은 모든 전화 모드가 너비가 600px 미만이라는 사실에도 불구하고.

무엇을 제공합니까?

@media only screen and (max-device-width : 667px) and (orientation : portrait) 
{ 
.fontresize { font-size: 3em; } 
}

또한 아이폰 미디어 this의 링크를 이용해 아래와 같이 세로 미디어 쿼리에

아이폰

출처

2016-11-15 thanks_in_advance

를 조회 Chrome 브라우저 창 너비를 좁히면 Chrome 브라우저 창이 열립니다.

그러나, 다음이 상황에서 작동하지 않습니다

을 내 서버에 페이지를로드와 세로 모드 내 아이폰 4S의 크롬 브라우저를 열 때. 이 같은 증상이있을 때

, 검사 할 첫번째 일은 당신은 문서의 머리에 뷰포트 메타 태그를 가지고

<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
.... 
</head>

대한 추가 정보 : http://www.w3schools.com/css/css_rwd_viewport.asp

행운을 빌어 요

출처

2016-11-15 04:25:23

(4S, 5, 5 초, 6, 6 플러스)이 바탕 화면에 잘 작동

출처

2016-11-15 04:13:59

응답 성은 모바일에서 다르게 작동합니까?

답변

관련 문제