iPhone에서 방향 변경시 웹 앱의 배율 / 줌을 재설정하려면 어떻게합니까?

96

세로 모드에서 앱을 시작하면 제대로 작동합니다. 그런 다음 가로 방향으로 회전하면 확대됩니다. 가로 모드에서 올바르게 크기를 조정하려면 먼저 두 번 탭해야합니다. 먼저 완전히 확대 (일반적인 두 번 탭 동작)하고 다시 완전히 축소해야합니다 (다시 일반 두 번 탭 동작). . 축소하면 가로 모드에 적합한 새 배율로 축소됩니다.

세로로 다시 전환하는 것이 더 일관되게 작동하는 것 같습니다. 즉, 방향이 다시 세로로 변경 될 때 배율이 정확하도록 줌을 처리합니다.

이것이 버그인지 알아 내려고 노력하고 있습니까? 아니면 이것이 자바 스크립트로 고칠 수 있다면?

뷰포트 메타 콘텐츠를 사용하여 초기 배율을 1.0으로 설정하고 최소 또는 최대 배율을 설정하지 않습니다 (원하지 않음). 너비를 장치 너비로 설정하고 있습니다.

어떤 아이디어? 지속적인 문제인 것 같아 많은 사람들이 해결책이 있으면 감사 할 것임을 알고 있습니다.

javascript  iphone  ipad  orientation 
— 엘리자베스
소스
1
완벽한 솔루션 : 자바 스크립트가 없습니다! stackoverflow.com/a/8727440/805787
— Steeven

답변:

89

Jeremy Keith ( @adactio )의 블로그 Orientation and scale 에서 이에 대한 좋은 솔루션을 제공합니다.

마크 업에서 최대 스케일을 설정하지 않음으로써 마크 업의 확장 성을 유지하십시오.

<meta name="viewport" content="width=device-width, initial-scale=1">

그런 다음 이 스크립트로 확장 성을 다시 허용 할 때 제스처가 시작될 때 까지로드시 자바 스크립트를 사용하여 확장 성을 비활성화합니다 .

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}


2014 년 12 월 22 일 업데이트 : iPad 1에서는 작동하지 않으며 이벤트 리스너에서 실패합니다. 다음과 같은 .body수정 사항을 제거하는 것으로 나타났습니다 .

document.addEventListener('gesturestart', function() { /* */ });
— 스노 보요 한
소스
4
확실히 이것은 줌을 비활성화하는 것보다 낫다?! 내가 :) 아직 발견 한 가장 좋은 수정
— danwellman
흠, 여전히 확대 / 축소 기능이 비활성화됩니다. 누구든지 이것을하지 않는 간단한 해결책이 있습니까?
— Brad Swerdfeger 2012
작동하지만 핀치 줌 제스처를 사용하고 화면을 회전하면 문제가 다시 시작되는 것으로 나타났습니다. 해결 방법을 잘 모르겠습니다.
— Nilesh 2012 년
3
효과가있다. 그러나 사용자가 확대 / 축소하려면 두 번 열어야한다는 것을 알았습니다. maximum-scale=1.0제스처가 시작된 후에도 효과가 유지 되기 때문이라고 생각 합니다. 이 문제를 해결할 방법이 있습니까?
— LandonSchropp
3
두 가지 이유로 작동하지 않습니다. 1) 제스처 시작 번호 1을 비활성화하여 사용자가 두 번 제스처를해야합니다. 2) 사용자가 첫 번째 제스처를 두 배로하면 깨지기 때문에 사용자가 전혀 제스처를하지 않는 경우에만 작동합니다. -모든 사람은 아래의 Andrew Ashbacher 솔루션을 살펴 봐야합니다. 실제로 작동한다.
— tmsimont
18

스콧 옐 은 방향 변화를 예측하기 위해 가속도계를 사용하는 환상적인 솔루션을 습니다. 이 솔루션은 반응성이 뛰어나며 확대 / 축소 동작을 방해하지 않습니다.

https://github.com/scottjehl/iOS-Orientationchange-Fix

작동 방식 :이 수정은 기기의 가속도계를 청취하여 방향 변경이 곧 발생할시기를 예측하는 방식으로 작동합니다. 방향 변경이 임박한 것으로 판단되면 스크립트는 사용자 확대 / 축소를 비활성화하여 확대 / 축소가 비활성화 된 상태에서 방향 변경이 제대로 발생하도록합니다. 스크립트는 장치가 수직에 가깝게 방향이 잡히거나 방향이 변경된 후 확대 / 축소를 다시 복원합니다. 이렇게하면 페이지를 사용하는 동안 사용자 확대 / 축소가 비활성화되지 않습니다.

축소 된 소스 :

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);
— 앤드류 애쉬 바커
소스
좋은! 우아한 솔루션처럼 보입니다.
— Elisabeth
1
이것은 받아 들여진 대답이어야한다 !!!! 나는 위의 솔루션에 한 시간을 낭비하기 전에 이것을 처음 보았 으면 좋겠다. :)
— tmsimont
1
추가 테스트 후 이것은 일종의 신뢰할 수없는 솔루션입니다. 회전하는 동안 각도
— tmsimont
회전 잠금을 사용하는 모든 사람에게 불쾌한 결과를 초래할 수 있습니다. 전화기를 특정 각도로 잡고 확대 / 축소 기능을 잃을 수 있습니다. 사용자는 이유를
— 모를
14

나는 같은 문제가 있었고 maximum-scale = 1.0을 설정하면 저에게 효과적이었습니다.

편집 : 주석에서 언급했듯이 콘텐츠가 너비 해상도를 초과하는 경우를 제외하고 사용자 확대 / 축소를 비활성화합니다. 언급했듯이 이것은 현명하지 않을 수 있습니다. 어떤 경우에는 원할 수도 있습니다.

뷰포트 코드 :

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">
— 라칼 루프
소스
좋은 솔루션입니다. 방향 변경을 통해 페이지를 일정한 확대 / 축소 수준 (기기 너비에 비례)으로 유지하는 것이 좋습니다. 공유해 주셔서 감사합니다!
— Luke Stevenson
17
단점은 비활성화 된 사용자가 사이트를 확대 할 수 없다는 것입니다!
— Jess Jacobs
이 모든 방법이 미디어 쿼리 기반 CSS가 새 장치 너비를 올바르게 등록하지 못하도록하는 것 같습니다 (예 : @media all 및 (최대 너비 : 479px)
— mheavers 2011-08-23
2
사용자 줌을 죽이는 것은 매우 나쁜 생각입니다. 아래 Andrew Ashbacher의 솔루션을 참조하십시오
— tmsimont
iPhone에 대해서는 확실하지 않지만 iPad에서는 문제가 해결되지 않고 브라우저가 방향 변경시 확대 할 때 사용자가 수동으로 축소 할 수 없게됩니다.
— Alejo
3

뷰포트에서 너비를 설정 한 경우 :

<meta name = "viewport" content = "width=device-width; initial-scale=1.0;
 maximum-scale=1.0;" />

그런 다음 방향을 변경하면 때때로 (특히 화면에서 드래그하는 경우) 무작위로 확대되어이 문제를 해결하기 위해 여기에서 너비를 설정하지 않습니다.

<meta id="viewport" name="viewport" content="initial-scale=1.0; user-scalable=0;
minimum-scale=1.0; maximum-scale=1.0" />

이것은 무슨 일이 발생하든 확대 / 축소를 수정 한 다음 window.onorientationchange 이벤트를 사용하거나 window.innerWidth 메서드 를 플랫폼 독립적 (테스트에 편리함 )으로 만들 수 있습니다.

— 사이더
소스
1

MobileSafari는 개체 orientationchange에 대한 이벤트를 지원 window합니다. 불행히도 JavaScript를 통해 확대 / 축소를 직접 제어하는 ​​방법이없는 것 같습니다. 아마도 meta뷰포트를 제어 하는 태그를 동적으로 작성 / 변경할 수있을 것입니다. 그러나 이것이 작동 할 것 같지는 않지만 페이지의 초기 상태에만 영향을줍니다. 이 이벤트를 사용하여 실제로 CSS를 사용하여 콘텐츠의 크기를 조정할 수 있습니다. 행운을 빕니다!

— Avi 아마
소스
3
감사! 예, 메타 태그 뷰포트 값을 동적으로 변경하려고 시도했지만 아무 작업도 수행하지 않았습니다. 가로로 회전하면 페이지가 Safari 창에 맞도록 배율을 유지하기 위해 올바르게 확대 / 축소하려는 것 같습니다. 이것이 기본 동작이 아니라는 것이 매우 이상하게 보입니다!
— Elisabeth
1

내 프로젝트에서이 기능을 사용하고 있습니다.

function changeViewPort(key, val) {
    var reg = new RegExp(key, "i"), oldval = document.querySelector('meta[name="viewport"]').content;
    var newval = reg.test(oldval) ? oldval.split(/,\s*/).map(function(v){ return reg.test(v) ? key+"="+val : v; }).join(", ") : oldval+= ", "+key+"="+val ;
    document.querySelector('meta[name="viewport"]').content = newval;
}

그래서 그냥 addEventListener :

if( /iPad|iPhone|iPod|Android/i.test(navigator.userAgent) ){
    window.addEventListener("orientationchange", function() { 
        changeViewPort("maximum-scale", 1);
        changeViewPort("maximum-scale", 10);
    }
}
— 제임스 양
소스
0

기본 iOS 확대 / 축소를 비활성화하고 대신 JavaScript에서 확대 / 축소 기능을 구현하여 내가 본 것과는 다른 새로운 해결 방법을 찾았습니다.

확대 / 축소 / 방향 문제에 대한 다양한 다른 솔루션에 대한 훌륭한 배경은 Sérgio Lopes입니다. 세로 방향으로의 방향 변경시 유명한 iOS 확대 / 축소 버그 수정 .

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" id="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <title>Robocat mobile Safari zoom fix</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        #container {
            -webkit-transform-origin: 0px 0px;
            -webkit-transform: scale3d(1,1,1);
            /* shrink-to-fit needed so can measure width of container http://stackoverflow.com/questions/450903/make-css-div-width-equal-to-contents */
            display: inline-block;
            *display: inline;
            *zoom: 1;
        }
        #zoomfix {
            opacity: 0;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <input id="zoomfix" disabled="1" tabIndex="-1">
    <div id="container">
        <style>
            table {
                counter-reset: row cell;
                background-image: url(http://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg);
            }
            tr {
                counter-increment: row;
            }
            td:before {
                counter-increment: cell;
                color: white;
                font-weight: bold;
                content: "row" counter(row) ".cell" counter(cell);
            }
        </style>
        <table cellspacing="10">
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
        </table>
    </div>

    <script>
    (function() {
        var viewportScale = 1;
        var container = document.getElementById('container');
        var scale, originX, originY, relativeOriginX, relativeOriginY, windowW, windowH, containerW, containerH, resizeTimer, activeElement;
        document.addEventListener('gesturestart', function(event) {
            scale = null;
            originX = event.pageX;
            originY = event.pageY;
            relativeOriginX = (originX - window.pageXOffset) / window.innerWidth;
            relativeOriginY = (originY - window.pageYOffset) / window.innerHeight;
            windowW = window.innerWidth;
            windowH = window.innerHeight;
            containerW = container.offsetWidth;
            containerH = container.offsetHeight;
        });
        document.addEventListener('gesturechange', function(event) {
            event.preventDefault();
            if (originX && originY && event.scale && event.pageX && event.pageY) {
                scale = event.scale;
                var newWindowW = windowW / scale;
                if (newWindowW > containerW) {
                    scale = windowW / containerW;
                }
                var newWindowH = windowH / scale;
                if (newWindowH > containerH) {
                    scale = windowH / containerH;
                }
                if (viewportScale * scale < 0.1) {
                    scale = 0.1/viewportScale;
                }
                if (viewportScale * scale > 10) {
                    scale = 10/viewportScale;
                }
                container.style.WebkitTransformOrigin = originX + 'px ' + originY + 'px';
                container.style.WebkitTransform = 'scale3d(' + scale + ',' + scale + ',1)';
            }
        });
        document.addEventListener('gestureend', function() {
            if (scale && (scale < 0.95 || scale > 1.05)) {
                viewportScale *= scale;
                scale = null;
                container.style.WebkitTransform = '';
                container.style.WebkitTransformOrigin = '';
                document.getElementById('viewport').setAttribute('content', 'user-scalable=no,initial-scale=' + viewportScale + ',minimum-scale=' + viewportScale + ',maximum-scale=' + viewportScale);
                document.body.style.WebkitTransform = 'scale3d(1,1,1)';
                // Without zoomfix focus, after changing orientation and zoom a few times, the iOS viewport scale functionality sometimes locks up (and completely stops working).
                // The reason I thought this hack would work is because showing the keyboard is the only way to affect the viewport sizing, which forces the viewport to resize (even though the keyboard doesn't actually get time to open!).
                // Also discovered another amazing side effect: if you have no meta viewport element, and focus()/blur() in gestureend, zoom is disabled!! Wow!
                var zoomfix = document.getElementById('zoomfix');
                zoomfix.disabled = false;
                zoomfix.focus();
                zoomfix.blur();
                setTimeout(function() {
                    zoomfix.disabled = true;
                    window.scrollTo(originX - relativeOriginX * window.innerWidth, originY - relativeOriginY * window.innerHeight);
                    // This forces a repaint. repaint *intermittently* fails to redraw correctly, and this fixes the problem.
                    document.body.style.WebkitTransform = '';
                }, 0);
            }
        });
    })();
    </script>
</body>
</html>

개선 될 수 있지만 내 필요에 따라 내가 본 다른 모든 솔루션에서 발생하는 주요 단점을 피할 수 있습니다. 지금까지 iOS4가 설치된 iPad 2에서 모바일 Safari를 사용하여 테스트했습니다.

focus () / blur ()는 방향을 변경하고 몇 번 확대 / 축소 한 후에 발생할 수있는 확대 / 축소 기능이 가끔 잠기는 것을 방지하는 해결 방법입니다.

document.body.style을 설정하면 전체 화면 다시 그리기가 강제 실행되므로 확대 / 축소 후 다시 그리기가 심하게 실패하는 간헐적 인 문제를 방지 할 수 있습니다.

— 로보 캣
소스
0

Elisabeth는 메타 태그에 "id"속성을 추가하여 뷰포트 콘텐츠를 동적으로 변경할 수 있습니다.

<meta name="viewport" id="view" content="user-scalable=yes, width=device-width minimum-scale=1, maximum-scale=1" />

그런 다음 자바 스크립트로 호출 할 수 있습니다. 

document.getElementById("view").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=10');
— M Penades
소스
확대 / 축소 또는 뷰포트를 동적으로 변경하려면 uiwebview에 포함 된 하위 뷰 스크롤 뷰를 사용하십시오. 다른 스레드에 샘플 스 니펫을 추가했습니다. link
— M Penades
4
@Elisabeth가 당신을 위해 작동합니까? 나를 위해 가로 모드로 전환 할 때 확대 / 축소를 재설정하지 않습니다.
— instanceof me
0

잘 작동하는 또 다른 방법이 있습니다.

  1. 메타 태그를 설정하여 뷰포트를 scale = 1로 제한하여 확대 / 축소를 방지합니다.

    <meta name = "viewport"content = "width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1">

  2. 자바 스크립트를 사용하여 1/2 초 후에 확대 / 축소를 허용하도록 메타 태그를 변경합니다.

    setTimeout (function () {document.querySelector ( "meta [name = viewport]"). setAttribute ( 'content', 'width = device-width, initial-scale = 1');}, 500);

  3. 다시 자바 스크립트를 사용하여 방향 변경시 페이지를 다시로드합니다.

    window.onorientationchange = function () {window.location.reload ();};

장치의 방향을 변경할 때마다 페이지가 처음에 확대 / 축소없이 다시로드됩니다. 그러나 1/2 초 후에 줌 기능이 복원됩니다.

— 마크 램프 리
소스
6
질문을받은 지 5 년이 지난 후 질문에 답하는 것은 무언가입니다. 불행히도 이것은 2015 년에 웹이 작동하는 방식이 아닙니다. 사용자가 기기를 회전 할 때 페이지를 다시로드하지 않습니다.
— Pierre
0

매우 쉽게 구현 된 수정 사항을 찾았습니다. 양식 완료시 글꼴 크기가 50px 인 텍스트 요소에 포커스를 설정합니다. 텍스트 요소가 숨겨져 있으면 작동하지 않는 것 같지만 요소 색상 속성을 불투명도없이 설정하면이 요소를 쉽게 숨길 수 있습니다.

— Dellsmash
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.