iPad 레이아웃은 세로에서 가로로 회전 할 때 확대됩니다.
"viewport"메타 태그에 추가 "width=device-width,initial-scale=1.0"하고 iPad에서 페이지가 가로 모드에서 잘로드되고 세로 모드로 멋지게 전환되고 가로로 다시 회전하면 페이지 크기가 조정되고 다시 축소됩니다. 1 밀리.
을 추가하여 "maximum-scale=1.0, user-scalable=no"사용자가 페이지를 확대하는 기능을 빼앗기지 않고 문제를 해결할 수있는 방법이 있는지 궁금합니다.
제안 사항이 있으시면 듣고 싶습니다.
감사합니다!
------ 업데이트 ------
이것은 iOS7에서 더 이상 문제가 아닙니다. 그리고 iOS6에서 작동 하는 github scottjehl / iOS-Orientationchange-Fix 에 대한 Scott Jehl의 더 나은 수정 사항이 있습니다.
------ 원래 답변 ------
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);
}
}
Scott Jehl 은 변경 도계를 사용하여 방향을 예측 하는“솔루션을 내놓았 습니다. 이 솔루션은 제품이 아니라 확장 / 축소 동작을 방해하지 않습니다.
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);
바라건대, 이것이 도움이 될 것입니다 ...
<head>
<style type="text/css">
<!--
/*
I began with the goal to prevent font scaling in Landscape orientation.
To do this, see: http://stackoverflow.com/questions/2710764/
Later, I just wanted to magnify font-size for the iPad, leaving
the iPhone rendering to the css code. So ...
(max-device-width:480px) = iphone.css
(min-device-width:481px) and
(max-device-width:1024px) and
(orientation:portrait) = ipad-portrait.css
(min-device-width:481px) and
(max-device-width:1024px) and
(orientation:landscape) = ipad-landscape.css
(min-device-width:1025px) = ipad-landscape.css
*/
@media only screen and (min-device-width: 481px)
{
html {
-webkit-text-size-adjust: 140%; /* none for no scaling */
}
}
-->
</style>
</head>
jQuery Mobile에서 사용하는 수정 사항은 다음과 같습니다.
https://github.com/scottjehl/iOS-Orientationchange-Fix
축소됨
/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT / GPLv2 License.*/(function (a) { function m() { d.setAttribute("content", g), h = !0 } function n() { d.setAttribute("content", f), h = !1 } function o(b) { l = b.accelerationIncludingGravity, i = Math.abs(l.x), j = Math.abs(l.y), k = Math.abs(l.z), (!a.orientation || a.orientation === 180) && (i > 7 || (k > 6 && j < 8 || k < 8 && j > 6) && i > 5) ? h && n() : h || m() } var b = navigator.userAgent; if (!(/iPhone|iPad|iPod/.test(navigator.platform) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(b) && b.indexOf("AppleWebKit") > -1)) return; var c = a.document; if (!c.querySelector) return; var d = c.querySelector("meta[name=viewport]"), e = d && d.getAttribute("content"), f = e + ",maximum-scale=1", g = e + ",maximum-scale=10", h = !0, i, j, k, l; if (!d) return; a.addEventListener("orientationchange", m, !1), a.addEventListener("devicemotion", o, !1) })(this);
전체 소스
/*! A fix for the iOS orientationchange zoom bug.
Script by @scottjehl, rebound by @wilto.
MIT / GPLv2 License.
*/
(function(w){
// This fix addresses an iOS bug, so return early if the UA claims it's something else.
var ua = navigator.userAgent;
if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){
return;
}
var doc = w.document;
if( !doc.querySelector ){ return; }
var meta = doc.querySelector( "meta[name=viewport]" ),
initialContent = meta && meta.getAttribute( "content" ),
disabledZoom = initialContent + ",maximum-scale=1",
enabledZoom = initialContent + ",maximum-scale=10",
enabled = true,
x, y, z, aig;
if( !meta ){ return; }
function restoreZoom(){
meta.setAttribute( "content", enabledZoom );
enabled = true;
}
function disableZoom(){
meta.setAttribute( "content", disabledZoom );
enabled = false;
}
function checkTilt( e ){
aig = e.accelerationIncludingGravity;
x = Math.abs( aig.x );
y = Math.abs( aig.y );
z = Math.abs( aig.z );
// If portrait orientation and in one of the danger zones
if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){
if( enabled ){
disableZoom();
}
}
else if( !enabled ){
restoreZoom();
}
}
w.addEventListener( "orientationchange", restoreZoom, false );
w.addEventListener( "devicemotion", checkTilt, false );
})( this );
이것은 iOS 4의 버그로 보이며 다음 자바 펼쳐 스 니펫으로 할 수 있습니다 사용자의 핀치 투 줌 기능을 강화합니다.
https://gist.github.com/901295/229d163414e22ebb14a6a6ba0b9777118f02e52d
이것은 작동합니다!
<script >
// BUG orientation portrait/lanscape IOS //
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.addEventListener('orientationchange', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1';
}, false);
}
}
</script>
스크립트가 작동하고 오리엔테이션 변경 이벤트에서와 같이 두 번째 제스처 사소한 조정을 우회하려면 최대 값을 1.0 대신 1.00099로 설정합니다.
회전시 확대 / 축소를 1로 유지하지만 사용자가 핀치 투 줌을 허용하는 다른 솔루션을 생각해 냈습니다. 기본적으로 사용자가 확대 / 축소 할 때 javascript는 뷰포트 확대 / 축소 수준을 변경합니다 (기본 브라우저 확대 / 축소 기능은 비활성화 됨).
여기에서 확인하세요 : https://stackoverflow.com/a/11878932/436776
첫 번째 수정 사항은 다음 변경 사항으로 저에게 효과적이었습니다.
초기 배율을 .8, 최소값을 .25, 최대 값을 1.6으로 변경합니다.
"메타"태그 사용
<meta name="viewport" content="width=device-width, initial-scale=1">
<script ="text/javascript">
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=.25, maximum-scale=1.6, initial-scale=.8';
document.body.addEventListener('gesturestart', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
페이지 크기를 늘린다 고 말할 때 모든 요소입니까, 아니면 텍스트 글꼴 크기입니까? ... 글꼴 크기를 수정하려면 다음을 사용할 수 있습니다.
html {
-webkit-text-size-adjust: 100%;
}
메타로 :
%meta{content: "width=device-width, initial-scale=1.0, minimum-scale=0.25, maximum-scale=1.6, user-scalable=yes", name: "viewport"}
글로벌 스크립트 :
if navigator.platform.toLowerCase() is "ipad"
viewport = $ "meta[name='viewport']"
viewport_content = viewport.attr("content")
# reset initial zoom
viewport.attr "content", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"
setTimeout =>
viewport.attr "content", viewport_content
, 0
# reset zoom on rotate
timeout = null
window.onorientationchange = ->
clearTimeout timeout if timeout?
viewport.attr "content", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"
timeout = setTimeout =>
viewport.attr "content", viewport_content
, 1000
'ProgramingTip' 카테고리의 다른 글
| 내부 클래스의 공용 및 내부 멤버? (0) | 2020.12.01 |
|---|---|
| 기본 키와 ID의 차이점은 무엇입니까? (0) | 2020.12.01 |
| 입력이 일치하지 않을 때 grep이 오류를 반환하지 않습니다. (0) | 2020.12.01 |
| Twitter Bootstrap : navbar 내에서`.btn` 클래스를 사용하는 올바른 방법은 무엇입니까? (0) | 2020.12.01 |
| git push가 Total 줄 나중에 중단됨 (0) | 2020.12.01 |