이 글에서는 주로 모바일 웹 개발의 기본 사항을 소개합니다. 모바일 장치의 가로 및 세로 화면을 다루는데 window.orientation 속성과 onorientationchange 이벤트 및 미디어 쿼리 방법은 개발 과정에서 주의해야 할 두 가지 솔루션입니다. . 도움이 필요한 친구들은 다음을 참고하세요
모바일 기기 화면의 단편화에 대처하기 위해 모바일 웹 애플리케이션을 개발할 때 가장 좋은 방법 중 하나는 제한된 화면 공간을 최대한 활용할 수 있도록 유동적인 레이아웃을 채택하는 것입니다. 가능한 최대 범위. 화면 방향으로 인해 사용자가 화면 방향을 전환한 후 일부 디자인 또는 구현 문제가 명백해집니다. 최소한 현재 표시 요소의 너비 조정을 처리해야 합니다(물론 이보다 더 많은 일을 해야 합니다). 다양한 화면 방향에 맞게 해당 애플리케이션 디스플레이 모드를 디자인해야 하는 경우가 많습니다. 이때 장치의 수직 화면 상태를 실시간으로 아는 것이 매우 중요합니다.
window.orientation属性与onorientationchange事件
window.orientation: 이 속성은 현재 장치의 화면 방향을 제공합니다. 0은 세로 화면을 의미하고 더하기 또는 빼기 90은 가로 화면(왼쪽 및 오른쪽) 모드를 의미합니다.
onorientationchange: 화면 방향이 가로와 세로 사이에서 변경될 때마다 수직 화면 사이를 전환한 후 이 창 이벤트가 트리거됩니다. 사용법은 기존 이벤트와 유사합니다.
1: onorientationchange 이벤트의 콜백 함수를 사용하여 body 태그에 orient라는 속성을 동적으로 추가합니다. , body[orient=landspace] 또는 Body[orient=portrait] 메소드를 사용하면 CSS에서 해당 스타일을 정의하므로 다양한 스타일이 다양한 화면 모드에서 표시될 수 있습니다. 다음 코드 예:
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
body[orient=landscape]{
background-color: #ff0000;
}
body[orient=portrait]{
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<p>
内容
</p>
<script type="text/javascript">
(function(){
if(window.orient==0){
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","landscape");
}
})();
window.onorientationchange=function(){
var body=document.body;
var viewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape");
}
};
</script>
</body>
</html>2: 비슷한 아이디어는 CSS 속성 선택기를 통해 구현되지 않습니다. 다음 코드의 구현 계획:
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<p>
内容
</p>
<script type="text/javascript">
(function(){
var init=function(){
var updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
break;
}
document.body.parentNode.setAttribute("class",orientation);
};
window.addEventListener("orientationchange",updateOrientation,false);
updateOrientation();
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</body>
</html>
미디어 쿼리 방법 사용
편리한 방법으로 다음 코드 데모와 같이 순수 CSS를 사용하여 해당 기능을 구현할 수 있습니다.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){
body {
background-color: #00ff00;
}
}
</style>
</head>
<body>
<p>
内容
</p>
</body>
</html> 하위 버전 브라우저의 원활한 다운그레이드
대상 모바일 브라우저가 미디어 쿼리를 지원하지 않고 window.orientation이 지원하는 경우 그런 다음 이를 달성하기 위해 다른 방법을 사용해야 합니다. 타이머를 사용하여 "의사 실시간"으로 현재 창의 높이(window.innerHeight)와 너비(window.innerWidth)의 비율을 비교하여 현재 수평 및 수직 화면 상태. 다음 코드에서 볼 수 있듯이:
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>按键</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
document.body.parentNode.setAttribute("class",orientation);
};
var init=function(){
updateOrientation();
window.setInterval(updateOrientation,5000);
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<p>
内容
</p>
</body>
</html> 통합 솔루션
위의 두 솔루션을 통합하면 다음 코드에서 볼 수 있듯이 크로스 브라우저 솔루션을 구현할 수 있습니다.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");
var updateOrientation=function(){
if(supportOrientation){
updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
}
document.body.parentNode.setAttribute("class",orientation);
};
}else{
updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};
}
updateOrientation();
};
var init=function(){
updateOrientation();
if(supportOrientation){
window.addEventListener("orientationchange",updateOrientation,false);
}else{
window.setInterval(updateOrientation,5000);
}
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<p>
内容
</p>
</body>
</html>위 내용은 모바일 단말기 개발 : 모바일 기기의 가로, 세로 화면 다루기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
