모바일 웹사이트에서 가로 방향을 어떻게 적용하나요?

모바일 사이트: 가로 방향만 적용

모바일 웹사이트에서 자동 회전을 방지하고 가로 방향을 강제할 수 있는 방법은 무엇인가요? 이 질문은 "모바일 우선" 접근 방식으로 사이트를 개발할 때 발생합니다.

이 문제를 해결하기 위해 미디어 쿼리를 활용할 수 있습니다. 다음 CSS 코드 조각은 구현을 보여줍니다.

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

제공된 코드에는 두 개의 별도 스타일시트가 지정됩니다.

• style_l.css: 이 스타일시트는 화면이 표시될 때 적용됩니다. 가로 방향으로. 원하는 가로 레이아웃으로 콘텐츠를 표시하는 데 필요한 스타일이 포함되어 있습니다.
• style_p.css: 이 스타일시트는 화면이 세로 방향일 때 적용됩니다. 특정 요소를 숨기거나 비활성화하거나 앱이 가로 모드 전용으로 설계되었음을 나타내는 메시지를 표시하는 데 사용할 수 있습니다.

이 접근 방식을 구현하면 모바일 사이트가 가로 모드로 잠기도록 할 수 있습니다. 사용자가 실수로 기기를 회전하여 잠재적으로 왜곡되거나 사용할 수 없는 인터페이스를 경험하는 것을 방지합니다.

위 내용은 모바일 웹사이트에서 가로 방향을 어떻게 적용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!