programing

Android 웹 페이지에서 입력 포커스 확대/축소 비활성화

linuxpc 2023. 9. 13. 22:23

Android 웹 페이지에서 입력 포커스 확대/축소 비활성화

여기 딜레마가 있습니다. 웹 페이지(안드로이드 기기 전용)가 있고 해당 페이지에는 입력 상자(구체적으로 텍스트 상자)가 있고 초점이 맞춰지면 브라우저가 확대됩니다.줌인을 하지 않았으면 좋겠어요. 쉽겠죠?

이게 재미있는 부분입니다. 일반적으로 확대할 수 있어야 하니까 말하지 마세요.

<meta name='viewport' content='user-scalable=0'>

그건 저한테는 안 될 거에요.

또한 입력란에는 클릭 이벤트가 입력되지 않습니다.다른 버튼을 클릭하면 프로그래밍 방식으로 포커스가 표시됩니다.

제가 시도한 것은 다음과 같습니다. 그들은 지금까지 실패했습니다.

jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');

이것도 실패했습니다.

<input type='text' onfocus="return false">

그리고 이것은:

jQuery("#locationLock input").focus(function(e){e.preventDefault();});

무슨 생각 있어요?

다음은 저에게 효과가 있었습니다(안드로이드 갤럭시 S2).

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>

안 돼요!

여러분께 안 좋은 소식이 있습니다.이제 6개월이 지났는데 그 질문에 정확하게 대답한 사람은 아무도 없습니다.

그리고 저는 그 프로젝트와 고용주에 대한 작업도 마쳤습니다.

말하기는 두렵지만, 제가 요구한 것은 정확하게 불가능합니다.미안한 국민 여러분.하지만 저는 사람들이 다른 선택지를 볼 수 있도록 질문을 남겨둘 것입니다.

스케일 문제로 인해 입력 포커스 확대/축소 발생

다양한 화면 해상도 및 크기에 따라 콘텐츠 크기를 조정하는 데 큰 어려움이 있으며, 이는 결국 이러한 줌 문제의 원인입니다.

대부분의 모바일 브라우저에는 입력 포커스에 대한 트리거(어렵게 오버라이드할 수 없음)가 있습니다.

if (zoom-level < 1)
   zoom to 1.5
   center focused input relative to screen

*네, 그건 너무 지나치게 과장된 겁니다.

메타태그 스케일 수정에 대한 신화.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">이러한 모든 뷰포트 설정은 줌아웃된 경우 입력 포커스 줌을 방지하지 못합니다.또한 창을 화면보다 더 넓은 너비로 밀어 넣을 수 있는 다른 html, 본문 또는 요소 크기 조정을 오버라이드하지 않습니다.

1차 원인

장치 화면 치수보다 큰 창 또는 본체 크기를 사용합니다.

대부분의 안드로이드 스마트폰 갤럭시 라인의 표준 화면 크기: 360 x 650.문서 본문 또는 창이 이보다 더 큰 것으로 정의된 경우(예를 들어 1024 너비), 다음과 같은 몇 가지 일이 발생할 수 있습니다.

브라우저는 화면의 너비를 맞추기 위해 자동 확대될 수 있습니다.
1. 사용자는 위의 작업을 수행할 수 있습니다.
2. 당신은 위의 일을 했을지도 모릅니다.
브라우저는 이후에 페이지를 방문할 때 줌 레벨을 복원합니다.
이제 ~0.35배 줌으로 컨텐츠를 볼 수 있습니다.

초기 상태 1x

로드하면 페이지가 맞지 않습니다.일부 브라우저는 창에 맞게 축소할 수 있지만, 사용자는 분명 그럴 것입니다.또한 이 페이지에서 한 번 줌아웃하면 브라우저에 줌 레벨이 저장됩니다.

0.35배로 축소

축소하면 가로 폭이 잘 맞고 세로 면적이 더 넓은 페이지가 화면을 잘 채울 수 있습니다. 하지만...

이제 브라우저는 텍스트와 입력(일반적인 1배 확대/축소 시 크기)이 너무 작아 읽을 수 없는 상태에 있으므로 포커스를 맞출 때 입력 필드를 확대/축소하는 사용성 동작을 트리거합니다.

확대/축소 입력-포커스 1.5배

위의 경우 일반적인 동작은 입력 가시성을 보장하기 위해 1.5배로 확대하는 것입니다.(모든 것을 축소할 때나 화면이 큰 경우) 결과는 바람직하지 않습니다.

해결책1

CSS 미디어 규칙, 장치 감지 또는 상황에 가장 적합한 모든 것을 조합하여 사용합니다.창과 본체를 화면 공간을 초과하지 않고 채우는 크기로 설정합니다.

이것이 많은 사람들이 입력 텍스트 크기를 16px로 강요하는 성공을 거둔 이유입니다.
- 그렇게 하면 WAY가 아웃되는 것이 분명합니다.
- 또한 브라우저를 속여서 창을 약간 축소하여 포커스 표시를 트리거하지 않도록 하는 추가적인 이점이 있습니다.

솔루션2

메타뷰포트를 사용하되 CSS 너비를 주의해야 합니다.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

이 방법을 사용할 때는 다음 중 하나를 수행해야 합니다.
- 폭에 대해서만 백분율을 사용합니다.
- em 너비를 정의하고 너비에 em과 %만 사용합니다.
- px 너비를 사용하려면 솔루션 1을 참조하십시오.

솔루션3

.mobile$.mobile.zoom.disable();

중간이 아니라 처음부터 개발을 시작해야 합니다.

이것이 최선의 방법인지는 모르겠지만 안드로이드와 아이폰에서는 이것이 가능합니다.

input:focus { font-size: 16px!important}

미디어 쿼리를 사용하여 모바일 장치만 대상으로 지정할 수 있습니다.

: CSS 이 input{ touch-action: none; }

네, 가능합니다.

input[type='text'],input[type='number'],textarea {font-size:16px;}

Android 4.2 브라우저 및 Android Chrome에서 테스트되었습니다.

https://stackoverflow.com/a/6394497/4264

Chrome with Settings -> Accessibility -> 텍스트 스케일링 100% 이상으로 계속 줌잉되는 경우가 유일하게 발견되었습니다.

font-size: 18px;

이것은 안드로이드 4.3을 실행하는 넥서스 7(2011)용으로 수정되었습니다.

이 문제는 Nexus 7에서만 발생하며, 다음 장치들은 모두 글꼴 크기에 만족하는 것으로 나타납니다: 16px.

HTC Desire Android 2.3.7
넥서스4 안드로이드 4.3

누군가에게 도움이 되길 바랍니다!

오늘 이 문제에 부딪혔고 곧 해결할 수 있는 크롬 업데이트가 있을 수 있습니다.@Jo가 지적한 크롬 문제에 의하면,

28번 jdd...@ymmon.jpx.https://codereview.chromium.org/196133011/, 현재 자동 확대 기능은 모바일에 최적화된 뷰포트(예: "width=device-width" 또는 고정 페이지 스케일 뷰포트 주석)가 있는 사이트에서 사용할 수 없습니다.

편집 가능한 요소를 이러한 사이트에 포커싱할 때 요소의 가시성을 유지하기 위해 자동 스크롤이 여전히 존재할 수 있지만 확대/축소 기능은 비활성화됩니다.이것은 M41에서 생방송 될 것입니다. (베타 채널을 시작한 지 아직도 몇 주가 지났음)

기존 데스크톱 사이트에 대한 자동 확대를 방지할 계획은 없습니다.

현재 Chrome은 v.40이고 v.41은 베타 버전입니다.Android Chrome 브라우저에서 포커스가 계속 손실되는지 확인합니다.

입력의 글꼴 크기를 16px로 설정하면 확대/축소가 중지됩니다.모바일 브라우저는 16px 이하는 사용자가 줌을 해야 한다는 것을 의미한다고 가정하는데 제가 직접 해보는 것이 어떨까요.

 input[type='text'],input[type='number'],textarea {font-size:16px;}
 body{ -webkit-text-size-adjust:none;}

아래 메타 태그를 설정할 수도 있지만 사용자의 확장을 완전히 방지합니다.

<meta name="viewport" content="width=device-width,  initial-scale=1.0, user-scalable=0;"/>

사용자 스케일링을 원하지만 입력 스케일링만 비활성화하는 경우 시도해 보십시오.

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

이것도 먹어보세요.

이 문제는 HTML5 Android 앱 때문에 짜증이 나서 계속 보고 있습니다.반은 대답해 드릴 수 있습니다.즉, 텍스트 필드에 포커스가 있을 때 페이지 스케일링을 중지하는 방법입니다.

Jquery Mobile 필요:

$('#textfield').textinput({preventFocusZoom:true});

정확히 그렇게 합니다.

하지만, 말씀드린 것처럼, 이것은 문제의 절반만 해결해 줍니다.나머지 절반은 사용자가 나중에 다시 페이지를 확대할 수 있도록 하는 것입니다.제가 발견한 문서에는 다음과 같이 나와 있습니다.

    $('#textfield').textinput({preventFocusZoom:false});

아니면

$('#textfield').textinput('option','preventFocusZoom',false);

설정을 해제해야 하는데, 두 가지 옵션 중 하나도 작동하지 않았습니다.나중에 사용자를 다른 페이지로 이동시키더라도 문제가 되지 않지만, 저처럼 AJAX를 통해 콘텐츠를 로드하려는 경우에는 제한적으로 사용할 수 있습니다.

편집: 비록 IOS를 목표로 했지만,

$.mobile.zoom.disable();

확대/축소도 중지합니다.좀 더 일반적인 방법으로.하지만 안타깝게도

$.mobile.zoom.enable();

이전 코드와 동일하게 기능을 복원하지 못합니다.

필요한 것은 두 가지입니다.

사용자가 확대/축소하는 것을 피하기 위해 머릿속에 다음과 같은 메타태그를 사용합니다.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

그리고 나서 당신의 CSS에 브라우저가 줌잉 되는 것을 피하기 위해 다음과 같은 것을 넣었습니다.

* { font-size:16px; }

완료! 브라우저에서 가장 작은 폰트 같은 것을 기준으로 뷰포트 크기가 조정되는 것 같습니다.누가 더 잘 설명해줄 수도 있겠지만 효과는 있었습니다 :)

은 합니다에서 합니다.#inputbox입력 양식 요소의 ID입니다.

IOS에서 검색 상자가 자동 확대되지 않도록 이를 사용하고 있습니다. 마우스 오버 이벤트는 처음에만 작동하고 이후 시간은 트리거하지 못하기 때문에 위의 이전 게시물의 모드입니다.즐기세요 진짜 헤어풀러였어요

$("#inputbox").live('touchstart', function(e){
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
    }
);

$("#inputbox").mousedown(zoomEnable);

function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

참고 사항만 추가하면 됩니다.

은 과 과 은 솔루션meta name="viewport"완벽하게 작동합니다.그러나 안드로이드의 네이티브 브라우저와 크롬 브라우저 모두 "웹사이트의 줌 제어 요청 덮어쓰기"라는 접근성 설정이 있습니다.이 설정을 설정하면 HTML, CSS, 자바스크립트의 어떤 것도 줌을 비활성화할 수 없습니다.

이것을 사용해 보세요. 내 장치에서 작동합니다.

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" />

하지만 입력란을 두 번 클릭하면 키보드가 위로 미끄러지면서 페이지의 높이가 줄어듭니다.

워킹 모델

우리는 이것을 안드로이드에서 작동시키고 있습니다.여기 키가 있습니다: 입력의 글꼴 크기는 적절한 크기여야 합니다.페이지 너비가 320px라면 16px 글꼴 크기가 필요합니다.사이즈가 640px라면 32px 폰트 사이즈가 필요합니다.

또한 당신은 다음이 필요합니다.

320 와이드 버전

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

640 와이드 버전

<meta name="viewport" content="width=640, initial-scale=.5, maximum-scale=.5, minimum-scale=.5" />

참고: 사용자 확장 가능 속성이 포함되어 있지 않습니다. 그러면 손상됩니다.

숨겨진 입력 필드에 초점을 맞추려고 할 때 확대/축소를 중지하려는 모든 사용자는 화면 영역(또는 볼 수 있는 영역)만큼(또는 적어도 너비만큼) 숨겨진 입력을 할 수 있습니다.

예.

HIDDENinput.style.width = window.innerWidth;

HIDDENinput.style.height = window.innerHeight;선택사항)

다음과 같은 대답이 좋습니다.

input, textarea {
  max-width:100%;
}

사용하지않습니다.<meta name=viewport content='user-scalable=no'>

줌을 비활성화할 수 있을지 모르겠지만 이렇게 제한을 설정할 수 있습니다.

 <meta id="viewport" name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

최대 스케일 = 0.5 및 최소 스케일 = 0.5가 효과가 있어야 합니다.그것은 나에게 효과가 있었다.

이 메타 태그를 html 파일에 추가하면 문제가 해결됩니다.

<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0' ></head><body>html code</body></html>

줌 스케일을 1.0으로 재설정하여 줌을 피할 수도 있습니까?Android(HTC Wildfire S)에서 다음과 같이 줌을 1.0으로 재설정할 수 있습니다.

$('meta[name=viewport]').attr('content',
         'initial-scale=1.0, maximum-scale=0.05');

그러나 이렇게 하면 뷰포트가 0, 0(페이지의 왼쪽 상단 모서리)으로 이동합니다.그래서 저는$().scrollLeft(...)그리고..scrollTop(...)시로 .form한 번, 다시.

(initial-scale=1.0, maximum-scale=0.05이것은 제가 처음으로 생각하는 가치입니다.viewportmeta.)

가 이렇게 하는 을 하는 것을 , 손상되는 . (즉, Android 되는 을 에 를 하기 로 되는 가 는 를 하기 로 에 는 screen.width기타 관련 값을 입력합니다.)

우연히 발견한 것은 다음과 같습니다.

 input {
     line-height:40px;
 }

Chrome for Android 버전 18의 Galaxy Nexus에 대한 확대 입력을 방지합니다.

<meta name='viewport' data='width=800'>

그래서 나중에 참고로, 만약 당신이 구글을 통해 이곳에 온다면, 이것은 다른 해결책들 중 하나일 것입니다.

저도 같은 문제가 있었습니다(안드로이드 크롬 브라우저에서만).저는 이 문제를 이렇게 해결했습니다.

userAgent를 탐지하고 텍스트 필드의 onFocus 및 onBlur 이벤트를 바인딩하여 뷰포트 메타 컨텐츠를 다음과 같이 변경합니다.

if ((navigator.userAgent.match(/Android/i)) && (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
isAndroidChrome = true;    
}
var viewportmeta = document.querySelector('meta[name="viewport"]');

필드에 과 같은 Focus of the text 에, 는 합니다 를 과 합니다 를 에 을 설정합니다.viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1';
텍스트 필드의 블러에서 뷰포트 메타 콘텐츠를 다음으로 재설정합니다.viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.4';할 수 경우에는 최대 을 설정하지 또는 사용자가 원하는 경우 최대 스케일을 설정하지 마십시오.

때 를 할 onFocus의,일일 경우maximum-scale이다 ㅇ1안 가 요 요 가 .이것은 저에게 매력적으로 작용했습니다.당신에게도 효과가 있기를 바랍니다.

말했듯이 @soshmo는 대로.user-scalable웹킷이 좋아하는 속성이 아니기 때문에 웹킷이 전체 뷰포트 태그를 버리게 됩니다.또한 이것이 설정의 경우에도 해당된다는 것을 발견했습니다.maximum-scale1이 아닌 다른 곳으로 갔지만, 그렇다고 줌이 멈추지는 않았습니다.

을 재설정하기 viewportfocus그리고.blur이벤트가 효과가 있었습니다.

var htmlWidth = parseInt($('html').outerWidth());
var screenDPI = parseInt(window.devicePixelRatio);
var screenWidth = parseInt(screen.width);
var screenHeight = parseInt(screen.height);    
var scaleVal = (((screenWidth * screenDPI) / htmlWidth)/screenDPI);
$('input[type="text"], input[type="password"], input[type="email"]').each(function() {

    //unchained for clarity

    $(this).focus(function() { 
        $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
        // Do something to manage scrolling the view (resetting the viewport also resets the scroll)
        $('html, body').scrollTop(($(this).offset().top - (screenHeight/3)));
    });

    $(this).blur(function() { 
        $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
    });
});

의 설정 /viewport웹킷이 사용 중인 콘텐츠 속성을 수용하는지 확인할 필요가 있습니다.시간이 좀 걸려서야 다음과 같은 것들을 사용한다는 것을 알게 되었습니다.user-scalable을 .viewport삭제될 예정이므로 자바스크립트가 작동 중임에도 불구하고 변경 사항은 영향을 받지 않았습니다.

터치 시작 시 뷰포트 사용자 확장 가능 속성을 설정하면 제거 후 터치 시작 시 변경 후 블러에서 다시 활성화할 필요가 없습니다.사용자가 현장에 집중하는 동안 줌을 할 수는 없지만 비용은 적게 지불하는 것을 의미합니다.

var zoomEnable;

zoomEnable = function() {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=yes");
};

$("input[type='text']").on("touchstart", function(e) {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=no");
});

$("input[type='text']").blur(zoomEnable);

Nexus 7의 경우 미디어 쿼리가 -

@media screen and (max-device-width: 600px) and (orientation : portrait)

그래서 미디어 쿼리 아래를 사용하여 문제를 해결했습니다.

@media screen and (max-device-width: 600px) and (max-aspect-ratio: 13/9)

파티에 좀 늦었지만, 어제 오후 내내 미친 듯이 지내다가 이 게시물에 도착했고 안드로이드의 기능/버그라는 것을 깨달았습니다.그래서 제가 해결책을 올리겠습니다.이것은 저에게 효과가 있었고, 여전히 사용자 줌을 활성화합니다.

메타:

<meta id="meta1" name="viewport" content="width=device-width,initial-scale=1,minimal-ui"/>

CSS:

html{
    position:absolute;
    overflow:-moz-scrollbars-vertical;
    overflow-y:scroll;
    overflow-x:hidden;
    margin:0;padding:0;border:0;
    width:100%;
    height:100%;
    }
body{
    position: relative;
    width: 100%;
    height: 100%;
    min-height:100%;
    margin: 0;
    padding: 0;
    border: 0;
}

을 HTML로 하기 으로 position:absolute그리고.overflow-x:hidden나를 위해 속임수를 썼답니다.

은하 4호를 위해 일했습니다.
파일에 를 추가합니다 : HTML더에를다스다를d:에oleel더ex스 .

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>

저도 비슷한 문제가 발생하여 해결하였기에 답변을 올립니다.

저의 상태는 아래입니다.

HTML 헤드의 뷰포트 설정은

<meta name="viewport" content="width=640">

에이전트는 Android 기본 브라우저입니다.
크롬, 파이어폭스, 사파리가 아닙니다.
안드로이드 버전은 4.2.x 이하입니다.

우리의 상황에 대한 세부적인 내용은 동일하지 않지만 본질적으로 동등한 문제가 있다고 생각합니다.

meta[name=viewport] 태그에 "target-densitydpi=device-dpi"를 추가하기 위해 해결했습니다.

<meta name="viewport" content="width=640, target-densitydpi=device-dpi">

한번 해보세요.

하지만 "target-density dpi=device-dpi"는 부작용이 있을 것입니다.

나쁜 사건이 여기에 있습니다.

안드로이드 OLD 브라우저는 "target-densitydpi=device-dpi"를 읽습니다.
대상 밀도 dpi 속성이 없는 다른 페이지로 이동합니다.
브라우저가 페이지를 "target-density dpi=device-dpi"로 렌더링하기 시작합니다.
따라서 다음 페이지를 잘못된 축척 인자로 렌더링합니다.

이 경우 해결책은 다음 페이지로 이동하기 전에 자바스크립트를 이용하여 타겟-밀도 dpi 속성을 "device-dpi"에서 "medium-dpi"로 다시 쓰는 것입니다.

jQuery를 사용한 예제.

<a href="go-to-the-other" class="resetDensityDpi">Other page</a>
<script>
$(function(){
    $('.resetDensityDpi').click(function(){
        var $meta = $('meta[name="viewport"]');
        $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=device-dpi/, 'target-densitydpi=medium-dpi'));
        return true;
    });
});
</script>

그리고... 이 코드는 새로운 문제를 일으킵니다.
일부 브라우저는 백 버튼을 이용하여 이전 페이지로 돌아갈 때 캐시 데이터를 이용하여 자바스크립트 처리 결과를 렌더링합니다.① "target-density dpi=medium-dpi" ② "target-density dpi=device-dpi" ③.

이에 대한 해결책은 위와 정반대입니다.

<script>
$(function(){
    var rollbackDensityDpi = function() {
        // disable back-forword-cache (bfcache)
        window.onunload = function(){};

        var $meta = $('meta[name="viewport"]');
        if ($meta.attr('content').match(/target-densitydpi=medium-dpi/)) {
            $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=medium-dpi/, 'target-densitydpi=device-dpi'));
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", rollbackDensityDpi, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", rollbackDensityDpi);
    } else {
        window.onload = rollbackDensityDpi;
    }
});
</script>

감사해요.

내용물을 창보다 좁게 유지합니다.

처음부터 이 점을 염두에 두고 페이지를 디자인해야 하겠지만, 완전히 효과적입니다.

핵심은 cssat-rule을 사용하여 화면이 충분히 포함할 수 있는 너비를 구성 요소에만 허용하는 것입니다.

예를 들어, 텍스트가 더 큰 모니터에 너무 많이 퍼지지 않도록 콘텐츠 너비를 설정한 경우 너비가 큰 화면에만 적용되는지 확인합니다.

@media (min-width: 960px){
.content{
  width : 960px;
}
}

또는 500px 너비의 이미지가 있는 경우 작은 화면에 숨겨야 할 수도 있습니다.

@media (max-width: 500px){
.image{
  display : none; 
}
}

2021년 업데이트

2021년에 돌아와서 동료들과 몇 번의 접근성 대화를 통해 답변을 업데이트합니다 ->.이 문제는 글꼴 크기가 16px보다 작은 입력에 대한 접근성 기능으로 인해 발생합니다.즉, 16px(1rem) 이상의 글꼴 크기를 사용하여 이 문제를 해결해야 합니다.즉, 위와 같은 접근성 기능을 제한하는 것이 아니라 설계 수준(디자이너가 접근성을 고려하지 않음)에서 해결해야 합니다.

원래의

일반적으로 내게 필요한 기능을 사용하지 않도록 설정할 수 있습니다.

하지만 고정 디브를 추가하고 웹 페이지를 그 안에 배치하는 것만으로 줌 문제를 해결할 수 있습니다.

#app {
  position: fixed;
  top: 0em;
  bottom: 0em;
  left: 0em;
  right: 0em;
  overflow: scroll;
 }

<body>
<div class="app">
  <!-- the rest of your web page  -->
  <input type="text">
</div>
</body>

<body>
     <div class="app">
     </div>
</body>

언급URL : https://stackoverflow.com/questions/7073396/disable-zoom-on-input-focus-in-android-webpage

'programing' 카테고리의 다른 글

Oracle 테이블을 단일 행으로 제한하는 간단한 제약 조건 (0)	2023.09.13
MySQL/MariaDB: 여러 개의 서로 다른 작업 시간 간격을 합산하여 사무실이 언제 열리는지 확인? (0)	2023.09.13
구독하지 않고 Observable에서 현재 값 가져오기(단 한 번만 값 받기) (0)	2023.09.13
여러 범주형 수준에 대해 다른 색 그림 표시 (0)	2023.09.13
c의 메모리에 대한 포인터와 액세스.조심하세요. (0)	2023.09.13

현재글Android 웹 페이지에서 입력 포커스 확대/축소 비활성화

각종 프로그래밍 정보를 다루는 블로그입니다.

angular, GIT, Excel, Android, WordPress, MariaDB, Oracle, c, AngularJS, ajax, bash, MongoDB, ASP.NET, powershell, jquery, JSON, python, sql-server, reactjs, spring-boot,

Today :
Yesterday :

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

linuxpc

Android 웹 페이지에서 입력 포커스 확대/축소 비활성화

Android 웹 페이지에서 입력 포커스 확대/축소 비활성화

안 돼요!

스케일 문제로 인해 입력 포커스 확대/축소 발생

메타태그 스케일 수정에 대한 신화.

1차 원인

초기 상태 1x

0.35배로 축소

확대/축소 입력-포커스 1.5배

해결책1

솔루션2

솔루션3

내용물을 창보다 좁게 유지합니다.

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

2025. 03
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Android 웹 페이지에서 입력 포커스 확대/축소 비활성화

Android 웹 페이지에서 입력 포커스 확대/축소 비활성화

안 돼요!

스케일 문제로 인해 입력 포커스 확대/축소 발생

메타태그 스케일 수정에 대한 신화.

1차 원인

초기 상태 1x

0.35배로 축소

확대/축소 입력-포커스 1.5배

해결책1

솔루션2

솔루션3

내용물을 창보다 좁게 유지합니다.

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역