ProgramingTip

Android 웹 페이지에서 입력 확대 / 축소

bestdevel 2020. 10. 27. 22:59

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();});

어떤 아이디어?

다음은 나를 위해 일했습니다 (Android Galaxy S2).

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

불가능!

여러분 모두에게 나쁜 소식이 있습니다. 이제 6 개월이 지났고 아무도 질문에 대답하지 않습니다.

또한 저는 그 프로젝트와 작업을 마쳤습니다.

나는 그것을 말하는 것이 두렵지 만 정확히 내가 요청한 것은 불가능합니다. 죄송합니다. 하지만 사람들이 다른 옵션을 볼 수있는 질문은 그대로 두겠습니다.

이것이 최선의 방법인지 확실하지 않지만 Android 및 iPhone에서 나를 위해 작동합니다.

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

미디어 쿼리를 사용하여 모바일 장치 만 사용할 수 있습니다.

확대 문제로 인해 증가 확대

다양한 화면 해상도 및 크기에 맞게 콘텐츠 크기를 조정하는 데 큰 어려움이 있으며,이를 통해이 확대 / 축소 문제의 원인입니다.

대부분의 모바일 브라우저에는 입력 포커스에 대한 트리거가 있습니다 (쉽게 재정의 할 수 없음).

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, body 또는 요소 크기를 재정의하지 않습니다.

주요 원인

기기 화면 크기보다 큰 창 또는 본문 크기를 사용합니다.

대부분의 Android 스마트 폰 제품군 Galaxy의 표준 화면 크기 인 360 x 650을 고려하십시오. 문서 본문 또는 창이 그보다 크게 정의 된 경우 (명확하게 표시하기 위해 1024 너비라고 가정 해 보겠습니다) 몇 가지 사항이있을 수 있습니다. 우연히있다 :

브라우저는 화면 너비에 맞게 자동 축소 될 수 있습니다.
1. 사용자는 위의 작업을 수행 할 수 있습니다.
2. 위의 작업을 수행 할 수 있습니다.
브라우저는 이후에 페이지를 방문 할 때 확대 / 축소 수준을 복원합니다.
이제 콘텐츠를 ~ 0.35 배 줌으로보고 있습니다.

초기 상태 1x

로드 널 페이지가 맞지 언어. 일부 브라우저는 창에 맞게 축소 할 수있는 사용자는 가장 확실합니다. 또한이 페이지를 한 번 축소하면 브라우저가 확대 / 축소 수준을 저장합니다.

0.35x에 맞게 축소

축소하면 너비가 잘 맞고 세로 영역이 더 많은 페이지가 화면을 아주 잘 채울 것입니다 ...하지만 ...

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

입력 확대 1.5 배 확대

위의 경우 일반적인 동작은 입력 가시성을 보장하기 위해 1.5 배로 확대하는 것입니다. 결과 (축소했을 때 또는 더 큰 화면에서보기) 좋게 모든 스타일을 행사할 때.

해결책 1

CSS 미디어 규칙, 감지 또는 상황에 가장 적합한 장치를 사용하십시오. 창과 본문을 화면 공간을 초과하지 않고 채우는 크기로 설정하십시오.

이것이 바로 많은 사람들이 입력 한 텍스트 크기를 16px로 강제하는 데 성공한 이유입니다.
- 일단 당신이 그렇게하면 당신이 축소되는 것이 분명합니다.
- 또한 브라우저를 속여서 창을 약간 축소하여 확대 확대를 트리거하지 않도록 추가 이점도 있습니다.

해결 방법 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

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

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

예, 가능합니다

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

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

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

확대 / 축소를 계속하는 유일한 경우는 설정-> 접근성-> 텍스트 배율이 100 % 이상인 Chrome에 있습니다.

오늘이 문제가 발생하는 경우 곧 문제를 해결할 수있는 크롬 업데이트가 가능합니다. 당 크롬 문제 @Jo가 내용

no.28 jdd ... @ chromium.org https://codereview.chromium.org/196133011/ 기준으로 모바일에 최적화 된 뷰포트가있는 사이트 (예 : "width = device-width"또는 고정 페이지 배율 표시 영역 주석 ).

요소의 가시성을 유지하기 위해 다만 사이트에서 편집 가능한 요소에 점점 늘어날 맞출 때 여전히 자동 스크롤이있을 수 있습니다. 이것은 M41에서 적용됩니다 (베타 채널에 도달 한 후 여전히 상당한 수의 주).

기존 데스크톱 사이트의 자동 확대 / 축소를 방지 할 계획이 없습니다.

현재 Chrome은 v.40입니다. v.41은 베타 버전입니다. Android Chrome 브라우저에서 포커스가 계속 확인하기 위해 체크인합니다.

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();

이전 코드처럼 기능을 복원하지 못합니다.

font-size: 18px;

이 Android 4.3을 실행하는 Nexus 7 (2011)에서 수정되었습니다.

이 문제는 Nexus 7에서만 발생합니다. 다음 장치는 모두 글꼴 크기에 만족합니다 : 16px :

HTC Desire Android 2.3.7
Nexus 4 Android 4.3

이것이 누군가를 돕기를 바랍니다!

이 #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"완벽하게 작동 하는 솔루션입니다 . 그러나 Android의 기본 및 Chrome 브라우저에는 모두 '확대 / 축소를 제어하기위한 웹 사이트의 요청 무시'가 있습니다 . 이 설정이 설정되면 HTML, CSS 또는 JavaScript의 어떤 것도 확대 / 축소 할 수 없습니다.

다음 두 가지가 필요합니다.

사용자가 확대 / 축소하지 마십시오. 다음과 같은 메타 태그를 머리에 사용하세요.

<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; }

완료! 브라우저가 가장 작은 글꼴 또는 이와 유사한 것을 기반으로 뷰포트의 크기를 조정합니다. 할 수는 무언가가 더 잘 설명 할 수 있습니다. :)

작업 모델

Android에서 작동합니다. 핵심은 다음과 가변 . 입력 의 글꼴 크기 는 적절한 크기의 집입니다. 페이지 너비가 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 가 트릭을 수행해야합니다. 그것은 나를 위해 일했습니다.

를 설정하면 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" />');
}

또한 시도 시도하십시오

확대 / 축소 확대 / 축소 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는 viewport메타 의 초기 값입니다 .)

(이렇게하는 이유는 Android가 확대 / 축소되는 것을 방지하기위한 것이 아니라 다른 Android 버그 screen.width및 기타 관련 값을 손상시키는 Android 버그로 인해 확대 / 축소되는 것 입니다.)

시도하면 내 장치에서 작동합니다.

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

그러나 입력 상자를 두 번 클릭하면 키보드가 위로 페이지 높이가 있습니다.

우연히 나는 그것을 발견했다 :

 input {
     line-height:40px;
 }

Android 용 Chrome 버전 18을 사용하는 Galaxy Nexus에서 입력 확대를 방지합니다.

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

따라서 Google을 통해 여기에 오면 다른 솔루션 중 하나 일 수 있습니다.

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

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

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

텍스트 필드의 onFocus에서 다음 뷰포트 메타 콘텐츠를 설정했습니다. viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1';
텍스트 필드의 onBlur, viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.4';원하는 경우 최대 배율을 사용하기 위해 뷰포트 메타 콘텐츠를 사용할 수 있습니다. 또는 사용자 확장이 가능하도록 선택할 수 있습니다.

언제 트리거에게 변경 onFocus(가) 경우, 입력의 이벤트 maximum-scale입니다 1, 그것을 확대하지 않습니다.이 마법처럼 날 위해 일했습니다. 그것이 당신에게도 효과가 있기 때문입니다.

@soshmo가 말했듯 user-scalable이 WebKit이 좋아하는 속성이 아니거나 포함하면 WebKit이 전체 뷰포트 태그를 삭제합니다. 나는 또한 이것이 maximum-scale1이 아닌 다른 언급 설정하는 경우라는 것을 발견 하고, 그것이 확대 / 축소를 발견했습니다.

viewport모든 이벤트 focus및 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버릴 수있는 것입니다. 시간이 걸리므로 JavaScript가 작동하지만 변경 사항은 영향을받지 않습니다.

touchstart에서 viewport user-scalable 속성을 설정하면 저에게 도움이 되더라도 제거 할 필요가 없습니다. 터치 스타트에서 변경 한 다음 흐림에서 다시 활성화 할 필요가 없습니다. 사용자가 현장에 집중하는 동안에는 줌을 할 수 없지만 내 생각에는 약간의 비용이 든다는 것을 의미합니다.

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)

파티에 조금 늦었지만 어제 오후 내내이 게시물에 도달하기 전에 미친 듯이 보냈고 Android의 / 버그라는 것을 깨달았습니다. 그래서 내 솔루션을 게시 할 것입니다. 이것은 나를 위해 일 여전히 사용자 확대 / 축소를 활성화합니다.

메타 :

<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나를 위해 트릭을했다.

Galaxy 4에서 작동 :
HTML 헤더 색인 파일에 코드 추가 :

<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 기본 브라우저입니다.
Chrome, Firefox 및 Safari가 아닙니다.
Android 버전은 4.2.x 출시입니다.

상황의 세부 사항은 동일하지 않지만 동일한 문제가 우리 생각합니다.

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

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

시도하십시오.

그러나 "target-densitydpi = device-dpi"는 부작용이있을 수 있습니다.

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

Android OLD 브라우저는 "target-densitydpi = device-dpi"를 읽습니다.
target-densitydpi 속성이없는 다른 페이지로 이동합니다.
브라우저는 페이지를 "target-densitydpi = device-dpi"로 방법을 시작합니다.
따라서 다음 페이지를 잘못된 주소로 변경합니다.

이 경우의 해결책은 다음 페이지로 이동하기 전에 javascript를 사용하여 "device-dpi"에서 "medium-dpi"로 target-densitydpi 속성을 다시 작성하는 것입니다.

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-densitydpi = device-dpi"가 아닌 "target-densitydpi = medium-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>

감사합니다.

콘텐츠를 창보다 좁게 유지하십시오.

이를 염두에두고 처음부터 페이지를 디자인해야하지만 전적으로 효과적입니다.

핵심은 @mediacss at-rule 을 사용하여 구성 요소가 화면이 포함하기에 충분히 큰 너비를 가질 수 있도록 허용하는 것입니다.

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

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

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

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

일반적으로 접근성 기능을 비활성화하고 싶지는 않습니다.

그러나 고정 div를 추가하고 그 안에 웹 페이지를 배치하기 만하면 확대 / 축소 문제를 해결할 수 있습니다.

#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>

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

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

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

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

이 줄을 추가하면 HTC desire 816 및 SAMSUNG GALAXY S5에서 문제가 해결되었습니다.

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

'ProgramingTip' 카테고리의 다른 글

부모 CSS 스타일을 무시하는 방법 (0)	2020.10.27
MSSQL GetDate ()를 사용할 때 날짜 만 가져 오려면 어떻게해야합니까? (0)	2020.10.27
TeamCity로 빌드 한 후 배포하는 방법은 무엇입니까? (0)	2020.10.27
일반 메서드에서 프로토콜 기본 구현 호출 (0)	2020.10.27
Dispatcher.BeginInvoke : 람다를 System.Delegate로 변환 할 수 없습니다. (0)	2020.10.26

현재글Android 웹 페이지에서 입력 확대 / 축소

bestdevel

Android 웹 페이지에서 입력 확대 / 축소

Android 웹 페이지에서 입력 확대 / 축소

불가능!

확대 문제로 인해 증가 확대

메타 태그에 대한 수정에 대한 오해.

주요 원인

초기 상태 1x

0.35x에 맞게 축소

입력 확대 1.5 배 확대

해결책 1

해결 방법 2

해결책 3

콘텐츠를 창보다 좁게 유지하십시오.

'ProgramingTip' 카테고리의 다른 글

'ProgramingTip'의 다른글

티스토리툴바

Android 웹 페이지에서 입력 확대 / 축소

Android 웹 페이지에서 입력 확대 / 축소

불가능!

확대 문제로 인해 증가 확대

메타 태그에 대한 수정에 대한 오해.

주요 원인

초기 상태 1x

0.35x에 맞게 축소

입력 확대 1.5 배 확대

해결책 1

해결 방법 2

해결책 3

콘텐츠를 창보다 좁게 유지하십시오.

'ProgramingTip' 카테고리의 다른 글

'ProgramingTip'의 다른글

관련글

티스토리툴바