입력“텍스트”태그 자동 확대 비활성화-iPhone의 Safari
<input>태그 가있는 HTML 페이지를 만들었습니다 type="text". iPhone에서 Safari를 사용하여 클릭하면 페이지가 커집니다 (자동 확대 / 축소). 아무도 이것을 비활성화하는 방법을 알고 있습니까?
글꼴 크기가 작고 16px양식 요소의 기본 글꼴 크기가 11px(최소한 Chrome 및 Safari) 인 경우 브라우저가 확대 / 축소됩니다 .
또한이 select요소에는 focus의사 클래스가 연결되어 있어야합니다 .
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
font-size: 16px;
}
단지 : 그것은 그냥 스타일은 요소 당신은 예를 들어, 필요 수 위의 모든를 사용할 필요는 없습니다 text, number그리고 textarea:
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}
입력 요소가 상위 스타일에서 상속되도록하는 대체 솔루션 :
body {
font-size: 16px;
}
input[type="text"] {
font-size: inherit;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
background: #eee;
}
}
포커스없이 입력에 16px를 사용하지 않으면 IOS는 여전히 확대 / 축소됩니다.
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
IOS가 선택에 배경을 추가하지 않기 때문에 배경을 추가했습니다.
사용자가 확대 / 축소 핀치 기능을 비활성화 하지 않고 사용자 입력 중에 Safari가 텍스트 필드를 자동으로 확대하지 못하게 할 수 있습니다 . maximum-scale=1다른 답변에서 제안 된 사용자 스케일 속성을 추가하십시오 .
확대 / 축소 된 경우 "부동"하는 레이어에 양식이있는 경우 중요한 UI 요소가 화면 밖으로 이동할 수있는 경우 유용한 옵션입니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
웹 사이트가 모바일 장치 용으로 올바르게 설계된 경우 확장을 허용하지 않을 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
이렇게하면 모바일 페이지 또는 양식이 '부동'하는 문제가 해결됩니다.
요약하면 대답은 다음과 같습니다. 양식 요소의 글꼴 크기를 16px 이상으로 설정하십시오.
input[type='text'],textarea {font-size:1em;}
이 문제를 해결하는 올바른 방법은 메타 뷰포트를 다음과 같이 변경하는 것입니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>내가 찾을 수있는 확실한 방법은 없지만 여기에 해킹이 있습니다 ...
1) 마우스 오버 이벤트는 확대 / 축소 전에 발생하지만 확대 / 축소는 마우스 다운 또는 포커스 이벤트 전에 발생합니다.
2) javascript를 사용하여 META 뷰포트 태그를 동적으로 변경할 수 있습니다 ( Javascript를 사용하여 iPhone Safari에서 확대 / 축소 활성화 / 비활성화?를 참조 하십시오 ).
따라서 이것을 시도하십시오 (압축성을 위해 jquery에 표시).
$("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" />');
}
이것은 분명히 해킹입니다 ... 마우스 오버 / 다운이 항상 항목 / 종료를 잡을 수는 없지만 테스트에서 잘 작동하고 견실 한 시작입니다.
나는 최근에 (오늘 : D)이 행동을 통합해야했습니다. 콤보를 포함한 원래 디자인 필드에 영향을 미치지 않기 위해 필자는 필드의 초점에 맞춰 변형을 적용하기로 결정했습니다.
input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
font-size: 16px;
}
다음과 같이 user-scalable = 0 을 뷰포트 메타에 추가하십시오.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
나를 위해 일했다 :)
iOS 7에서 작동하는 Javascript 핵은 @dlo의 답변을 기반으로하지만 mouseover 및 mouseout 이벤트는 touchstart 및 touchend 이벤트로 대체됩니다. 기본적으로이 스크립트는 확대 / 축소를 방지하기 위해 확대 / 축소가 다시 활성화되기 전에 0.5 초 시간 초과를 추가합니다.
$("input[type=text], textarea").on({ 'touchstart' : function() {
zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
setTimeout(zoomEnable, 500);
}});
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
}
이것은 나를 위해 일했다 :
input, textarea {
font-size: initial;
}
위의 Christina 솔루션을 사용했지만 부트 스트랩을 약간 수정하고 데스크톱 컴퓨터에 적용 할 다른 규칙을 사용했습니다. 부트 스트랩의 기본 글꼴 크기는 14px이므로 줌이 발생합니다. 다음은 부트 스트랩의 "폼 컨트롤"에 대해 16px로 변경하여 확대를 방지합니다.
@media screen and (-webkit-min-device-pixel-ratio:0) {
.form-control {
font-size: 16px;
}
}
비 모바일 브라우저의 경우 14px로 돌아갑니다.
@media (min-width: 768px) {
.form-control {
font-size: 14px;
}
}
.form-control : focus를 사용하여 16px로 변경 한 포커스를 제외하고 14px로 남겨두고 iOS8의 줌 문제를 해결하지 못했습니다. 적어도 iOS8을 사용하는 iPhone에서는 iPhone이 페이지를 확대하지 않으려면 글꼴 크기가 16px이어야합니다.
나는 jQuery와 함께 이것을했다 :
$('input[type=search]').on('focus', function(){
// replace CSS font-size with 16px to disable auto zoom on iOS
$(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
// put back the CSS font-size
$(this).css('font-size', $(this).data('fontSize'));
});
물론,이 16px글꼴 크기로 인해 디자인이 중단되는 경우 인터페이스의 일부 다른 요소를 수정해야 할 수도 있습니다 .
잠시 동안이 솔루션을 생각해 냈습니다.
// set font-size to 16px to prevent zoom
input.addEventListener("mousedown", function (e) {
e.target.style.fontSize = "16px";
});
// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
e.target.style.fontSize = "";
});
"마우스 다운"에서는 입력의 글꼴 크기를 16px로 설정합니다. 줌이되지 않습니다. 포커스가있는 이벤트에서는 글꼴 크기가 초기 값으로 다시 변경됩니다.
이전에 게시 된 솔루션과 달리 입력의 글꼴 크기를 원하는대로 설정할 수 있습니다.
여기에서 거의 모든 한 줄을 읽고 다양한 솔루션을 테스트 한 후 솔루션을 공유 한 모든 사람들, iPhone 7 iOS 10.x에서 나에게 제안하고 테스트 한 결과 덕분입니다.
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover{font-size: initial;}
}
@media (min-width: 768px) {
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover{font-size: inherit;}
}
그러나 "호버링"상태와 "포커스"상태 사이에서 발생하는 빠른 글꼴 크기 변경과 성능에 대한 다시 그리기 영향으로 인해 현저한 "점프"가 있습니다.
유사 요소는 :focus예전 처럼 작동하지 않습니다. iOS 11부터 기본 스타일 앞에 간단한 재설정 선언을 추가 할 수 있습니다 (글꼴 크기가 더 작은 글꼴을 재정의하지 않음).
/* Prevent zoom */
select, input, textarea {
font-size: 16px;
}
Tachyons.css와 같은 CSS 라이브러리의 경우 실수로 글꼴 크기를 무시하기 쉽다는 점을 언급 할 가치가 있습니다.
예를 들어 class : f5는 다음과 같습니다. fontSize: 1rem본문 글꼴 크기를 기본값으로 유지하면 좋습니다.
그러나 글꼴 크기 클래스를 선택 하면 작은 디스플레이에서 f6위와 같습니다 fontSize: .875rem. 이 경우 재설정 선언에 대해 더 구체적이어야합니다.
/* Prevent zoom */
select, input, textarea {
font-size: 16px!important;
}
@media screen and (min-width: 30em) {
/* not small */
}
그건 그렇고, Bootstrap을 사용하면이 변형을 사용할 수 있습니다.
.form-control {
font-size: 16px;
}
네덜란드 대학 웹 사이트 (양식 컨트롤에서 15px를 사용함)의 자동 폼 컨트롤 문제를 "수정"해야했습니다. 나는 다음과 같은 요구 사항을 생각해 냈습니다.
- 사용자는 여전히 확대 할 수 있어야합니다
- 글꼴 크기는 동일하게 유지되어야합니다
- 일시적으로 다른 스타일링의 번쩍임 없음
- jQuery 요구 사항 없음
- 최신 iOS에서 작동해야하며 다른 OS / 장치 조합을 방해하지 않아야합니다.
- 가능한 경우 매직 타임 아웃이없고, 필요한 경우 타이머를 올바르게 지 웁니다.
이것이 내가 지금까지 생각 해낸 것입니다.
/*
NOTE: This code overrides the viewport settings, an improvement would be
to take the original value and only add or change the user-scalable value
*/
// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
preventZoomOnFocus();
function preventZoomOnFocus()
{
document.documentElement.addEventListener("touchstart", onTouchStart);
document.documentElement.addEventListener("focusin", onFocusIn);
}
let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];
function onTouchStart(evt)
{
let tn = evt.target.tagName;
// No need to do anything if the initial target isn't a known element
// which will cause a zoom upon receiving focus
if ( tn != "SELECT"
&& tn != "TEXTAREA"
&& (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
)
return;
// disable zoom
setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}
// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
// reenable zoom
setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}
// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
if (vpnode)
vpnode.setAttribute("content",newvalue);
else
{
vpnode = document.createElement("meta");
vpnode.setAttribute("name", "viewport");
vpnode.setAttribute("content", newvalue);
}
}
몇 가지 참고 사항 :
- 지금까지 iOS 11.3.1에서만 테스트했지만 곧 다른 버전에서도 테스트됩니다.
- focusIn 이벤트를 사용한다는 것은 iOS 5.1 이상이 필요하다는 것을 의미합니다 (그러나 iOS 버전 9에서 작동하는 사이트는 멋진 보너스로 간주합니다)
- 내가 작업하는 많은 사이트에서 양식 컨트롤을 동적으로 만들 수있는 페이지가 있으므로 이벤트 위임 사용
- 본문을 사용할 수있을 때까지 기다릴 필요가 없도록 eventListeners를 html 요소 (documentElement)로 설정 (문서가 준비 /로드 된 상태인지 확인하거나 DOMContentLoaded 이벤트를 기다려야 함)
다른 많은 답변이 이미 지적했듯이 maximum-scale메타 viewport태그 에 추가하면 됩니다 . 그러나 이는 Android 기기에서 사용자 확대 / 축소를 사용 중지하면 부정적인 결과를 초래합니다 . ( v10 이후 iOS 기기에서는 사용자 확대 / 축소를 비활성화하지 않습니다 .)
기기가 iOS 인 경우 JavaScript를 사용 maximum-scale하여 메타 에 동적으로 추가 할 수 있습니다 viewport. 이 두 세계의 최고 달성 : 우리는 사용자가 확대 할 수 있도록 하고 초점을 텍스트 필드에 확대에서 아이폰 OS를 방지 할 수 있습니다.
| maximum-scale | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes | yes | yes | no |
| no | yes | no | yes |
| yes on iOS, no on Android | yes | yes | yes |
암호:
const addMaximumScaleToMetaViewport = () => {
const el = document.querySelector('meta[name=viewport]');
if (el !== null) {
const content = el.getAttribute('content');
const newContent = [content, 'maximum-scale=1.0'].join(', ');
el.setAttribute('content', newContent);
}
};
const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (checkIsIOS()) {
disableIosTextFieldZoom();
}
여기 사람들이 JavaScript 또는 뷰포트 기능으로 이상한 일을하고 장치에서 수동으로 모든 줌 기능을 끄는 것을 봅니다. 내 생각에는 해결책이되어서는 안됩니다. 이 CSS 스 니펫을 추가하면 글꼴 크기를 16px와 같은 고정 숫자로 변경하지 않고 iOS에서 자동 확대 기능이 해제됩니다.
기본적으로 입력 필드에 93.8 % (15px) 글꼴 크기를 사용하고 CSS 스 니펫을 추가하면 93.8 %로 유지됩니다. 16px로 변경하거나 고정 번호로 만들 필요가 없습니다.
input[type="text"]:focus,
textarea:focus {
-webkit-text-size-adjust: 100%;
}
본문의 글꼴 크기와 같은 글꼴 크기 (입력 필드의 경우)를 설정하면 브라우저가 축소되거나 확대되는 것을 막는 것 같습니다. font-size: 1rem보다 우아한 솔루션 으로 사용 하는 것이 좋습니다 .
iPhone에서 자동 확대 (축소 제외) 기능이 계속 작동하므로 초점 / 흐림 처리에 대한 dlo의 제안을 기반으로하는 JavaScript가 있습니다.
입력을 그대로두면 텍스트 입력이 취소되고 다시 활성화되는 즉시 확대 / 축소가 비활성화됩니다.
참고 : 일부 사용자는 작은 텍스트 입력으로 편집 텍스트를 적절하게 표시하지 않을 수 있습니다! 따라서 개인적으로 편집하는 동안 입력 텍스트 크기를 변경하는 것을 선호합니다 (아래 코드 참조).
<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
if (element.addEventListener) {
element.addEventListener(evtId, handler, false);
} else if (element.attachEvent) {
var ieEvtId = "on"+evtId;
element.attachEvent(ieEvtId, handler);
} else {
var legEvtId = "on"+evtId;
element[legEvtId] = handler;
}
}
function onBeforeZoom(evt) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = "user-scalable=0";
}
}
function onAfterZoom(evt) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = "width=device-width, user-scalable=1";
}
}
function disableZoom() {
// Search all relevant input elements and attach zoom-events
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
attachEvent(inputs[i], "focus", onBeforeZoom);
attachEvent(inputs[i], "blur", onAfterZoom);
}
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
attachEvent(window, "load", disableZoom);
}
// -->
</script>
다음 코드는 요소에 포커스가있는 동안 입력의 텍스트 크기를 16 픽셀 (현재 줌 크기로 계산)로 변경합니다. 따라서 iPhone은 자동으로 확대되지 않습니다.
참고 : 확대 / 축소 비율은 window.innerWidth 및 320 픽셀의 iPhone 디스플레이를 기준으로 계산됩니다. 이됩니다 만 세로 모드에서 아이폰 유효.
<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
if (element.addEventListener) {
element.addEventListener(evtId, handler, false);
} else if (element.attachEvent) {
var ieEvtId = "on"+evtId;
element.attachEvent(ieEvtId, handler);
} else {
var legEvtId = "on"+evtId;
element[legEvtId] = handler;
}
}
function getSender(evt, local) {
if (!evt) {
evt = window.event;
}
var sender;
if (evt.srcElement) {
sender = evt.srcElement;
} else {
sender = local;
}
return sender;
}
function onBeforeZoom(evt) {
var zoom = 320 / window.innerWidth;
var element = getSender(evt);
element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
var element = getSender(evt);
element.style.fontSize = "";
}
function disableZoom() {
// Search all relevant input elements and attach zoom-events
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
attachEvent(inputs[i], "focus", onBeforeZoom);
attachEvent(inputs[i], "blur", onAfterZoom);
}
}
if (navigator.userAgent.match(/iPhone/i)) {
attachEvent(window, "load", disableZoom);
}
// -->
</script>
그것을 찾는 데 시간이 걸렸지 만 여기에 내가 찾은 최고의 코드가 있습니다 ... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/
var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
});
Stephen Walsh의 답변을 바탕으로 ...이 코드는 초점이 맞지 않는 입력의 글꼴 크기를 변경하지 않고 작동합니다 (불충분하게 보입니다). 또한 여전히 FastClick 과 함께 작동 하므로 모든 모바일 사이트에 추가하여 " 스냅 피"를 가져올 수 있습니다. 필요에 맞게 "뷰포트 너비"를 조정하십시오.
// disable autozoom when input is focused
var $viewportMeta = $('head > meta[name="viewport"]');
$('input, select, textarea').bind('touchend', function(event) {
$viewportMeta.attr('content', 'width=640, user-scalable=0');
setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
});
font-size를 16px로 설정하는 것에 대한 최고 답변에 대한 해결책은 그것이 어떻게 해결책인지, 더 큰 / 작은 글꼴을 원하는지 어떻게 물었습니다.
나는 당신에 대해 모두 모르지만 글꼴 크기에 px를 사용하는 것이 가장 좋은 방법은 아닙니다 .em을 사용해야합니다.
텍스트 필드가 16 픽셀보다 큰 반응 형 사이트에서이 문제가 발생했습니다. 양식 컨테이너를 2rem으로 설정하고 입력 필드를 1.4em으로 설정했습니다. 모바일 쿼리에서 뷰포트에 따라 html 글꼴 크기를 변경합니다. 기본 HTML은 10이므로 데스크톱에서 입력 필드가 28px로 계산됩니다.
자동 확대를 제거하려면 입력을 1.6em으로 변경해야했습니다. 이것은 내 글꼴 크기를 32px로 늘 렸습니다. 약간 높고 눈에 띄지 않습니다. iPhone 4 & 5에서는 세로 방향으로 html 글꼴 크기를 15px로 변경하고 가로 방향으로 10px로 변경합니다. 해당 픽셀 크기의 스위트 스팟이 48px 인 것처럼 보였으므로 1.4em (42px)에서 1.6em (48px)로 변경되었습니다.
당신이해야 할 일은 글꼴 크기에서 스위트 스팟을 찾아서 rem / em 크기로 거꾸로 변환하는 것입니다.
내 프로젝트 중 하나에서 사용한 해킹은 다음과 같습니다.
select {
font-size: 2.6rem; // 1rem = 10px
...
transform-origin: ... ...;
transform: scale(0.5) ...;
}
초기 스타일과 스케일로 마무리되었지만 초점을 확대하지 않았습니다.
이러한 답변에도 불구하고 무슨 일이 일어나고 있는지 파악하는 데 3 일이 걸렸으며 나중에 솔루션을 다시 필요할 수 있습니다.
내 상황은 설명 된 것과 약간 다릅니다.
내 페이지의 div에 편집 가능한 텍스트가 있습니다. 사용자가 정렬 버튼 인 DIFFERENT div를 클릭하면 contenteditable div에서 일부 텍스트 (이전에 저장하고 지운 선택 범위)를 자동으로 선택하고 해당 선택에서 서식있는 텍스트 execCommand를 실행 한 다음 다시 지 웁니다.
이를 통해 페이지의 다른 곳에서 색상 div와의 사용자 상호 작용을 기반으로 텍스트 색상을 눈에 띄게 변경할 수 있었으며 적절한 컨텍스트에서 색상을 볼 수 있도록 선택 영역을 숨겨 두었습니다.
아이 패드의 사파리에서 컬러 div를 클릭하면 온 스크린 키보드가 나왔고, 아무것도 막지 못했습니다.
나는 마침내 아이 패드가 어떻게하고 있는지 알아 냈다.
편집 가능한 텍스트 선택을 트리거하는 터치 스타트 및 터치 엔드 시퀀스를 수신합니다.
해당 조합이 발생하면 온 스크린 키보드가 표시됩니다.
실제로 편집 가능한 텍스트를 확대하면서 기본 페이지를 확장하는 돌리 확대 / 축소를 수행합니다. 내가보고있는 것을 이해하는 데 하루가 걸렸습니다.
그래서 내가 사용한 솔루션은 특정 색상 div에서 터치 스타트와 터치 엔드를 모두 차단하는 것이 었습니다. 두 처리기 모두에서 전파 및 버블 링을 중지하고 false를 반환합니다. 그러나 터치 엔드 이벤트에서 클릭이 트리거 된 것과 동일한 동작을 트리거합니다.
그래서 Safari는 전에 "터치 스타트", "마우스 다운", "터치 엔드", "마우스 업", "클릭"이라고 생각한 것을 실행 시켰습니다.
인터셉트로 인한 새로운 시퀀스는 단순히 텍스트 선택입니다. Safari가 처리하고 키보드 작업을 수행하기 전에 다른 모든 것이 차단됩니다. 터치 스타트와 터치 엔드 인터셉트는 마우스 이벤트가 트리거되는 것을 막아줍니다.
나는 이것을 설명하는 더 쉬운 방법을 모르지만 처음에 문제가 발생한 후 1 시간 이내에이 스레드를 발견했기 때문에 여기에있는 것이 중요하다고 생각합니다.
나는 같은 수정이 입력 상자와 다른 것들에서 작동 할 것이라고 확신합니다. 터치 이벤트를 가로 채서 전파하거나 버블 링하지 않고 개별적으로 처리하고, 작은 시간 초과 후에 Safari가 시퀀스를 키보드 트리거로 인식하지 못하도록 선택을 고려하십시오.
글꼴 크기를 16px로 설정하는 대신 다음을 수행 할 수 있습니다.
- 입력 필드의 크기가 의도 한 크기보다 커지도록 논리 글꼴 크기를 16px로 설정하십시오.
- 입력 필드를 올바른 크기로 줄이려 면
scale()CSS 변환 및 음수 여백을 사용하십시오.
예를 들어 입력 필드의 스타일이 원래 다음과 같다고 가정합니다.
input[type="text"] {
border-radius: 5px;
font-size: 12px;
line-height: 20px;
padding: 5px;
width: 100%;
}
모든 치수를 16/12 = 133.33 % 늘려서 필드를 확대 한 다음 사용 scale()을 12/16 = 75 % 줄이면 입력 필드에 올바른 시각적 크기 (및 글꼴 크기)가 있고 확대 / 축소되지 않습니다 초점.
으로 scale()만 시각적 크기에 영향을, 당신은 또한 필드의 논리적 크기를 줄일 수 부정적인 여백을 추가해야합니다.
이 CSS로 :
input[type="text"] {
/* enlarge by 16/12 = 133.33% */
border-radius: 6.666666667px;
font-size: 16px;
line-height: 26.666666667px;
padding: 6.666666667px;
width: 133.333333333%;
/* scale down by 12/16 = 75% */
transform: scale(0.75);
transform-origin: left top;
/* remove extra white space */
margin-bottom: -10px;
margin-right: -33.333333333%;
}
입력 필드의 논리적 글꼴 크기는 16px이며 텍스트는 12px입니다.
블로그 게시물을 좀 더 자세히 살펴 보고이 예제를 볼 수있는 HTML로 가지고 있습니다 : iPhone의 Safari에서 입력 확대 / 축소가 없습니다 .
Angular에서는 지시문을 사용하여 IOS 장치에서 초점이 확대되는 것을 방지 할 수 있습니다. 접근성을 유지하기위한 메타 태그가 없습니다.
import { Directive, ElementRef, HostListener } from '@angular/core';
const MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX = 16;
@Directive({ selector: '[noZoomiOS]' })
export class NoZoomiOSDirective {
constructor(private el: ElementRef) {}
@HostListener('focus')
onFocus() {
this.setFontSize('');
}
@HostListener('mousedown')
onMouseDown() {
this.setFontSize(`${MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX}px`);
}
private setFontSize(size: string) {
const { fontSize: currentInputFontSize } = window.getComputedStyle(this.el.nativeElement, null);
if (MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX <= +currentInputFontSize.match(/\d+/)) {
return;
}
const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
iOS
&& (this.el.nativeElement.style.fontSize = size);
}
}
당신이 <input noZoomiOS >그것을 선언 한 후 이와 같이 사용할 수 있습니다*.module.ts
참고 URL : https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
'development' 카테고리의 다른 글
| 목록을 데이터 프레임으로 변환 (0) | 2020.02.15 |
|---|---|
| 문자열에서 텍스트를 제거하는 방법? (0) | 2020.02.15 |
| foreach 루프에서 첫 번째와 마지막 반복을 결정하는 방법은 무엇입니까? (0) | 2020.02.15 |
| v = (v == 0? 1 : 0)을 쓰는 더 좋은 방법이 있습니까? (0) | 2020.02.15 |
| 기능적, 선언적 및 명령형 프로그래밍 (0) | 2020.02.15 |