iPhone 웹 응용 프로그램에서 방향을 세로 모드로 잠 그려면 어떻게합니까?
iPhone 웹 응용 프로그램을 만들고 있는데 방향을 세로 모드로 잠그고 싶습니다. 이것이 가능한가? 이를위한 웹 키트 확장이 있습니까?
모바일 Safari 용 HTML 및 JavaScript로 작성된 응용 프로그램이며 Objective-C로 작성된 기본 응용 프로그램이 아닙니다.
뷰포트 방향에 따라 CSS 스타일을 지정할 수 있습니다. body [orient = "landscape"] 또는 body [orient = "portrait"]
http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
하나...
이 문제에 대한 Apple의 접근 방식은 개발자가 방향 변경에 따라 CSS를 변경할 수 있지만 방향이 완전히 바뀌지 않도록하는 것입니다. 다른 곳에서 비슷한 질문을 발견했습니다.
http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari
이것은 꽤 해킹 된 솔루션이지만 적어도 뭔가 (?)입니다. 아이디어는 CSS 변환을 사용하여 페이지의 내용을 준 초상화 모드로 회전시키는 것입니다. 시작하는 JavaScript (jQuery로 표시) 코드는 다음과 같습니다.
$(document).ready(function () {
function reorient(e) {
var portrait = (window.orientation % 180 == 0);
$("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
이 코드는 페이지의 전체 내용이 body 요소 내부의 div 안에 있어야합니다. 가로 모드에서 세로 방향으로 90도 회전합니다.
독자에게 연습으로 남겨 두십시오 : div가 중심점을 중심으로 회전하므로 완벽하게 정사각형이 아닌 한 위치를 조정해야합니다.
또한 눈에 띄지 않는 시각적 문제가 있습니다. 방향을 변경하면 Safari가 느리게 회전 한 다음 최상위 div가 90 도씩 달라집니다. 더 재미있게, 추가
body > div { -webkit-transition: all 1s ease-in-out; }
CSS에. 장비가 회전하면 Safari가 페이지 내용을 변경합니다. 속이는!
이 답변은 아직 불가능하지만 "미래 세대"를 위해 게시하고 있습니다. 언젠가 CSS @viewport 규칙을 통해이 작업을 수행 할 수 있기를 바랍니다.
@viewport {
orientation: portrait;
}
사양 (처리 중) :
https://drafts.csswg.org/css-device-adapt/#orientation-desc
MDN :
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation
MDN 브라우저 호환성 표 및 다음 기사를 기반으로 특정 버전의 IE 및 Opera에서 일부 지원이있는 것 같습니다.
http://menacingcloud.com/?c=cssViewportOrMetaTag
이 JS API 사양도 관련이 있습니다.
https://w3c.github.io/screen-orientation/
제안 된 @viewport규칙 으로 가능했기 때문에 태그 orientation에서 뷰포트 설정을 설정하면 가능할 것이라고 가정 meta했지만 지금까지는 성공하지 못했습니다.
상황이 개선됨에 따라이 답변을 자유롭게 업데이트하십시오.
다음 코드는 html5 게임에서 사용되었습니다.
$(document).ready(function () {
$(window)
.bind('orientationchange', function(){
if (window.orientation % 180 == 0){
$(document.body).css("-webkit-transform-origin", "")
.css("-webkit-transform", "");
}
else {
if ( window.orientation > 0) { //clockwise
$(document.body).css("-webkit-transform-origin", "200px 190px")
.css("-webkit-transform", "rotate(-90deg)");
}
else {
$(document.body).css("-webkit-transform-origin", "280px 190px")
.css("-webkit-transform", "rotate(90deg)");
}
}
})
.trigger('orientationchange');
});
미디어 쿼리를 사용하여 화면을 회전시키는이 CSS 전용 방법을 생각해 냈습니다. 검색어는 여기에서 찾은 화면 크기 를 기준으로 합니다 . 480px는 너비가 480px 이상이거나 높이가 480px 미만인 장치가 거의 없기 때문에 좋았습니다.
@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
html{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
width: 320px; /*this is the iPhone screen width.*/
position: absolute;
top: 100%;
left: 0
}
}
Screen.lockOrientation() 지원이 당시 보편적이지는 않지만이 문제를 해결합니다 (2017 년 4 월) :
https://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation
I like the idea of telling the user to put his phone back into portrait mode. Like it's mentioned here: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ...but utilising CSS instead of JavaScript.
Maybe in a new future it will have an out-of-the-box soludion...
As for May 2015,
there is an experimental functionality that does that.
But it only works on Firefox 18+, IE11+, and Chrome 38+.
However, it does not work on Opera or Safari yet.
https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility
Here is the current code for the compatible browsers:
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
lockOrientation("landscape-primary");
While you cannot prevent orientation change from taking effect you can emulate no change as stated in other answers.
First detect device orientation or reorientation and, using JavaScript, add a class name to your wrapping element (in this example I use the body tag).
function deviceOrientation() {
var body = document.body;
switch(window.orientation) {
case 90:
body.classList = '';
body.classList.add('rotation90');
break;
case -90:
body.classList = '';
body.classList.add('rotation-90');
break;
default:
body.classList = '';
body.classList.add('portrait');
break;
}
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();
Then if the device is landscape, use CSS to set the body width to the viewport height and the body height to the viewport width. And let’s set the transform origin while we’re at it.
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
Now, reorient the body element and slide (translate) it into position.
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px
html {
width: 320px;
overflow-x: hidden;
}
This, or a similar CSS solution, will at least preserve your layout if that is what you are after.
The root solution is accounting for device's capabilities rather than attempting to limit them. If the device doesn't allow you the appropriate limitation than a simple hack is your best bet since the design is essentially incomplete. The simpler the better.
In coffee if anyone needs it.
$(window).bind 'orientationchange', ->
if window.orientation % 180 == 0
$(document.body).css
"-webkit-transform-origin" : ''
"-webkit-transform" : ''
else
if window.orientation > 0
$(document.body).css
"-webkit-transform-origin" : "200px 190px"
"-webkit-transform" : "rotate(-90deg)"
else
$(document.body).css
"-webkit-transform-origin" : "280px 190px"
"-webkit-transform" : "rotate(90deg)"
Inspired from @Grumdrig's answer, and because some of the used instructions would not work, I suggest the following script if needed by someone else:
$(document).ready(function () {
function reorient(e) {
var orientation = window.screen.orientation.type;
$("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
}
$(window).on("orientationchange",function(){
reorient();
});
window.setTimeout(reorient, 0);
});
Click here for a tutorial and working example from my website.
You no longer need to use hacks just to look jQuery Mobile Screen Orientation nor should you use PhoneGap anymore, unless you're actually using PhoneGap.
To make this work in the year 2015 we need:
- Cordova (any version though anything above 4.0 is better)
- PhoneGap (you can even use PhoneGap, plugins are compatible)
And one of these plugins depending on your Cordova version:
- net.yoik.cordova.plugins.screenorientation (Cordova < 4)
cordova plugin add net.yoik.cordova.plugins.screenorientation
- cordova plugin add cordova-plugin-screen-orientation (Cordova >= 4)
cordova plugin add cordova-plugin-screen-orientation
And to lock screen orientation just use this function:
screen.lockOrientation('landscape');
To unlock it:
screen.unlockOrientation();
Possible orientations:
portrait-primary The orientation is in the primary portrait mode.
portrait-secondary The orientation is in the secondary portrait mode.
landscape-primary The orientation is in the primary landscape mode.
landscape-secondary The orientation is in the secondary landscape mode.
portrait The orientation is either portrait-primary or portrait-secondary (sensor).
landscape The orientation is either landscape-primary or landscape-secondary (sensor).
'Programing' 카테고리의 다른 글
| 처리되지 않은 약속 거부 란 무엇입니까? (0) | 2020.06.08 |
|---|---|
| 자바에서 XML 파싱을위한 최고의 라이브러리는 무엇입니까? (0) | 2020.06.08 |
| SignalR은 어떻게 내부적으로 작동합니까? (0) | 2020.06.08 |
| 마크 다운`네이티브`텍스트 정렬 (0) | 2020.06.08 |
| 목록 내 div가 허용됩니까? (0) | 2020.06.08 |