CSS 미디어 쿼리-소프트 키보드가 CSS 방향 규칙을 위반 함-대체 솔루션?
여러 태블릿 장치를 사용하고 있습니다-둘 다 Android 및 iOS. 현재 모든 태블릿에 대해 다음과 같은 해상도 변형이 있습니다.
- 1280 x 800
- 1280 x 768
1024 x 768 (당연히 iPad)-iPad에는이 문제가 없습니다.
장치 방향 기반 스타일을 적용하는 가장 간단한 방법은 다음 구문을 사용하여 미디어 쿼리의 방향을 사용하는 것입니다.
@media all and (orientation:portrait)
{
/* My portrait based CSS here */
}
@media all and (orientation:landscape)
{
/* My landscape based CSS here */
}
이것은 모든 태블릿 장치에서 완벽하게 작동합니다. 그러나 문제는 장치가 세로 모드이고 사용자가 입력 필드 (예 : 검색)를 탭하면 소프트 키보드가 팝업되어 웹 페이지의 가시 영역이 줄어들고 가로 기반 CSS로 렌더링됩니다. 안드로이드 태블릿 기기에서는 키보드 높이에 따라 다릅니다. 따라서 궁극적으로 웹 페이지가 깨져 보입니다. 따라서 CSS3의 방향 미디어 쿼리를 사용하여 방향에 따라 스타일을 적용 할 수 없습니다 (대상 방향에 더 나은 미디어 쿼리가없는 경우). 다음은 이것을 에뮬레이트 하는 바이올린 http://jsfiddle.net/hossain/S5nYP/5/ 입니다-장치 테스트를 위해 전체 테스트 페이지 사용 -http : //jsfiddle.net/S5nYP/embedded/result/
다음은 데모 페이지에서 가져온 동작의 스크린 샷입니다. 
따라서이 문제를 해결할 수있는 대안이 있습니까? 네이티브 CSS 기반 솔루션이 작동하지 않는 경우 JavaScript 기반 솔루션에 개방되어 있습니다.
http://davidbcalhoun.com/2010/dealing-with-device-orientation에서 클래스를 추가하고이를 기반으로 타겟팅 할 것을 제안 하는 스 니펫을 찾았습니다 . 예를 들면 :
<html class="landscape">
<body>
<h1 class="landscape-only">Element Heading - Landscape</h1>
<h1 class="portrait-only">Element Heading - Portrait</h1>
<!-- .... more... ->
# CSS
.landscape .landscape-only { display:block; }
.landspace .portrait-only { display:none; }
.portrait .portrait-only { display:block; }
.portrait .landscape-only { display:none; }
너희들은 이것에 대해 어떻게 생각하니? 더 나은 솔루션이 있습니까?
나는 이것이 몇 년 늦었지만 훌륭한 해결책을 찾았습니다.
가로 미디어의 경우 :
@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}
세로 미디어의 경우 :
@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}
전체 솔루션과 작동 이유는 여기에서 찾을 수 있습니다. Michael Barret-Android 브라우저 과제
편집 :이 링크는 현재 만료되었지만 인터넷 아카이브에서 스냅 샷을 찾을 수 있습니다. Michael Barret-Android 브라우저 문제
문제는 방향이 계산되는 방식에 있습니다.
http://www.w3.org/TR/css3-mediaqueries/#orientation
'방향'미디어 기능은 '높이'미디어 기능의 값이 '너비'미디어 기능의 값보다 크거나 같을 때 '세로'입니다. 그렇지 않으면 '방향'은 '가로'입니다.
높이 / 너비가 보이는 뷰포트에서 계산되기 때문에 소프트 키보드는 뷰포트 너비가 높이보다 작기 때문에 방향이 반전되도록합니다. 한 가지 해결책은 width대신에 기반한 미디어 쿼리를 사용하는 것입니다. 따라서 너비 / 높이가 방향보다 더 광범위하게 지원된다는 것은 말할 것도없고 방향에 관계없이 여러 장치에서 더 유연합니다.
방향 대신 너비를 고려하고 싶다면 iPhone을 예로 들어 보겠습니다.
@media screen and (max-width: 320px) {
/* rules applying to portrait */
}
@media screen and (max-width: 480px) {
/* rules applying to landscape */
}
이 접근 방식은 방향 이 너비에 대해 거의 알려주는 것은 말할 것도없고 방향을 지원하는 장치 / 사용자 에이전트로 쿼리가 제한되지 않기 때문에 방향보다 더 유연 합니다.
물론 오리엔테이션 을 정말로 알아야 한다면 처음에 수업을 설정하고 그것을 사용하는 것이 최선의 선택이 될 수 있습니다.
대안은를 사용할 수 있으며 device-aspect-ratio변경되지 않습니다. 그러나 Webkit에서 JavaScript 테스트가 새 종횡비에 대해 true를 반환하더라도 장치를 회전하면이 쿼리를 사용하여 CSS 규칙 업데이트가 트리거되지 않습니다. 이것은 명백하게 버그로 인해 ,하지만 난 버그 리포트를 찾을 수 없습니다입니다. 의 조합을 사용 orientation하고 {min,max}-device-aspect-ratio잘 작동 것 같다 :
@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait)
@media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape)
orientation트리거 사용은 예상대로 업데이트되고 사용은 device-aspect-ratio실제 방향 변경으로 업데이트됩니다.
나는 위에 나열된 옵션을 통해 작업했지만 나를 위해 문제를 해결하지 못했습니다. 나는 키보드 디스플레이 문제를 피하기 위해 일관된 높이 결과를 제공하기 때문에 screen.availHeight 사용으로 전환했습니다.
// Avoiding the keyboard in Android causing the portrait orientation to change to landscape.
// Not an issue in IOS. Can use window.orientation.
var currentOrientation = function() {
// Use screen.availHeight as screen height doesn't change when keyboard displays.
if(screen.availHeight > screen.availWidth){
$("html").addClass('portrait').removeClass('landscape');
} else {
$("html").addClass('landscape').removeClass('portrait');
}
}
// Set orientation on initiliasation
currentOrientation();
// Reset orientation each time window is resized. Keyboard opening, or change in orientation triggers this.
$(window).on("resize", currentOrientation);
나를 위해 이것은 트릭을했습니다.
@media screen and (max-device-aspect-ratio: 1/1), (max-aspect-ratio: 1/1){
/*Portrait Mode*/
};
max-aspect-ratio창 크기를 조정하는 것만으로 세로 모드를 트리거 하는 동안 (PC 및 기타 가로 전용 장치에 유용), max-device-aspect-ratio스마트 폰 또는 다양한 방향의 기타 장치에 도움이됩니다. 가로 모드에 대한 특정 설정을 선언하지 않기 때문에 max-aspect-ratio시스템에 1보다 큰 값을보고 하더라도 max-device-aspect-ratioAndroid 기기가 그런 방향 으로 향하면 세로 모드가 계속 트리거됩니다 .
The 1/1 part basically means that if the ratio is <=1, it goes to Portrait mode, otherwise it goes to landscape mode.
I've run through several of the answers above and none of them did exacly what i wanted, which is, to mimic iPhone functionality as closely as possible. The following is what is working for me in production now.
It works by assigning the window width and height of the device viewport to a data attribute for future checking. Since phones don't resize width when pulling up the keyboard, only the height, checking the ratio AND the width against the original width can tell you if the keyboard is up. I haven't found a use case this has failed yet, but I'm sure I will. If you all find one, please let me know.
I am using some globals, like InitialRun and MobileOrientation, which are used for js switching, I am also using html5 data-attributes to store info in the DOM for css manipulation.
var InitialRun = true; // After the initial bootstrapping, this is set to false;
var MobileOrientation = 'desktop';
function checkOrientation(winW, winH){ // winW and winH are the window's width and hieght, respectively
if (InitialRun){
if (winW > winH){
$('body').attr('data-height',winW);
$('body').attr('data-width',winH);
MobileOrientation = 'landscape';
$('body').attr('data-orientation','landscape');
}
else{
$('body').attr('data-height',winH);
$('body').attr('data-width',winW);
MobileOrientation = 'portrait';
$('body').attr('data-orientation','portrait');
}
}
else{
if (winW > winH && winW != $('body').data('width')){
MobileOrientation = 'landscape';
$('body').hdata('orientation','landscape'); //TODO:uncomment
$('body, #wrapper').css({'height':"100%",'overflow-y':'hidden'});
//$('body').attr('data-orientation','portrait');
}
else{
MobileOrientation = 'portrait';
$('body').attr('data-orientation','portrait');
$('body, #wrapper').css({'height':$('body').data('height'),'overflow-y':'auto'});
}
}
}
Take a look at this link: http://www.alistapart.com/articles/a-pixel-identity-crisis/
Relying not only on orientation, but also on max-device-height or device-pixel-ratio may help. Anyway, I did not test it, so not sure that it'll help.
Idea: Take the portrait parameter off of your media query and leave it only with a min-width. Do your normal styling for portrait mode in that media query. Then, create another media query for landscape mode with a min-height tall enough so that the the browser won't use that query when the keyboard pops up. You'd have to experiment with what this 'tall enough min-height' is, but it shouldn't be too hard since most (if not all) landscape modes have a height larger than you'd have when a keyboard pops up. Additionally, you could add a 'min-width' to the landscape query that is larger that most smart-phones in portrait view (i.e around ~400px) to limit scope of the query.
Here's an alternative (and tenuous) solution: - Add an empty arbitrary element to your html that will have 'display: none' in anything other than portrait mode. - Create a jquery or javascript listener for input:focus. When an input is clicked, your javascript checks the display property of the arbitrary element. If it returns 'block' or whatever you set it during portrait mode, then you can override your styling with JS to your portrait mode queries. Conversely, you'd have an input:blur listener to blank out the style.cssText properties of the elements you hard-coded.
I'm experimenting with this myself right now - I'll post code of what works when I get something solid and manageable. (My first solution seems the most reasonable).
This works reliably for me. I am using http://detectmobilebrowsers.com/ for the jQuery extension to detect $.browser.mobile.
if ($.browser.mobile) {
var newOrientationPortrait = true;
//Set orientation based on height/width by default
if ($(window).width() < $(window).height())
newOrientationPortrait = true;
else
newOrientationPortrait = false;
//Overwrite orientation if mobile browser supports window.orientation
if (window.orientation != null)
if (window.orientation === 0)
newOrientationPortrait = true;
else
newOrientationPortrait = false;
Here is my code to modify the viewport based on orientation. This function is only called for mobile devices, not even tablets. This allows me to easily write CSS for 400px and 800px (Portrait vs Landscape).
_onOrientationChange = function() {
if (_orientationPortrait)
$("meta[name=viewport]").attr("content", "width=400,user-scalable=no");
else
$("meta[name=viewport]").attr("content", "width=800");
}
Due to the nature of my requirements I was not able to do this in CSS Media queries alone, since the DOM itself needed to change based on orientation. Unfortunately at my job, business people write software requirements without consulting development first.
I faced the exact same issue in iPad.
ie; when the soft keyboard appears in portrait mode, device is detected in landscape orientation and styles for landscape is applied to the screen, which resulted in a messed up view.
Device Specification
- Device: iPad Mini 4
- OS: iOS 11.2.6
- Screen Resolution: 1024 x 768
unfortunately, for me, this solution didn't worked.
@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}
@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}
So, what I did is, I've written a media query like this for my portrait mode.
@media only screen and (min-width : 300px) and (max-width : 768px) and (orientation : landscape) {
/* portrait styles, when softkeyboard appears, goes here */
}
ie; when the soft keyboard appears, the screen height reduces but screen width remains to 768px, which resulted in media query detecting screen as landscape orientation. Hence the work around given as above.
I used a simple trick to solve this problem
@media (max-width: 896px) and (min-aspect-ratio: 13/9){/* Landscape content*/}
최대 너비 : 896px를 모든 모바일 장치에 사용할 수 있습니다. 이 솔루션을 사용해보십시오!
'Nice programing' 카테고리의 다른 글
| 심볼릭 링크를 제거하려면 어떻게합니까? (0) | 2020.10.26 |
|---|---|
| Haml에서 if 조건을 작성하는 방법은 무엇입니까? (0) | 2020.10.26 |
| 하나의 log4j 구성 파일로 2 개의 별도 로그 파일을 생성하려면 어떻게해야합니까? (0) | 2020.10.26 |
| 만드는 방법 (0) | 2020.10.26 |
| 빌드 전용 장치는이 대상을 실행하는 데 사용할 수 없습니다. (0) | 2020.10.26 |