휴대 기기에 표시된 웹 페이지가 변경되어 압축되었습니다 (데스크톱 브라우저와의 차이점)

Question

웹 사이트를 설정했습니다. CSS 설정으로 표시되어야합니다. 페이지는 IPad 장치를 뒤집을 때 작동합니다.

그러나 5.5 인치 스마트 폰과 같은 더 작은 화면 크기 장치의 경우.

웹 페이지 구조가 완전히 변경되고 압착되었습니다.

아래 코드를 HTML에 추가했습니다. 그러나 작동하지 않습니다.

컴퓨터 브라우저를 사용하여 표시된 페이지와 같이 모바일 장치로 표시된 페이지를 만들 때 편리하고 간단한 방법은 없습니까?

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 



    <!-- Mobile Specific Metas 
    ================================================== --> 
    <meta name="viewport" content="width=device-width, initial-scale=1">` 

컴퓨터 버전 :

모바일 버전 :

Answer 1

나는 F 당신은 자바 스크립트를 사용하여이 문제를 해결할 수 있다고 생각 보기를 바탕 화면보기로 표시하십시오.

Answer 2

좋은 생각은 중단 점을 사용하는 것입니다. 기본적으로, 다음과 같이 작동

@media screen and (min-width: 500px) { 
    /* Fill here with CSS styling */ 
} 

@media

는 다른 장치 나 화면 폭에 대해 서로 다른 스타일 규칙을 정의하는 데 사용됩니다. 기본적으로 브라우저에 중단 점을 설정할 준비가되었음을 알립니다.

screen은 브라우저에 어떤 종류의 미디어가 변경 될 것인지 알려주는 부분입니다.

(min-width: 500px)은 실제 중단 점입니다. 화면 너비가 500 픽셀 이상인 모든 기기에는 해당 스타일 규칙이 적용됩니다. 대안은 max-width을 사용하는 것이고, 그 반대입니다.