입력 "텍스트" 태그의 자동 줌을 비활성화합니다(iPhone의 Safari).
.HTML ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」<input>를 달다type="text"아이폰 사파리거거 어떻 는는 는?? ???
사용자가 확대/축소 기능을 사용하지 않도록 설정하지 않고 Safari가 사용자 입력 중에 텍스트 필드를 자동으로 확대하는 것을 방지할 수 있습니다.추가만 하면 됩니다.maximum-scale=1, 다른합니다.
레이어에 폼이 있어 확대/축소하면 "플로팅"되어 중요한 UI 요소가 화면 밖으로 이동할 수 있는 경우 유용한 옵션입니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
글꼴 크기가 다음 크기보다 작으면 브라우저가 확대/축소됩니다.16px는 폼 、 음 、 음 、 음 、 음 、 음음 and음 and and and and and and and and and and and and and and and and and and and and and and and 。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;
}
}
New: 포커스 없이 입력에 16px를 사용하지 않는 한 IOS는 계속 줌됩니다.
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
IOS가 선택 항목에 배경을 추가하지 않았기 때문에 배경을 추가했습니다.
웹 사이트가 모바일 장치에 맞게 올바르게 설계되어 있는 경우 확장을 허용하지 않을 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
이것에 의해, 모바일 페이지나 폼이 「떠돌아다닌다」라고 하는 문제가 해결됩니다.
이 문제를 해결하는 적절한 방법은 메타 뷰포트를 다음과 같이 변경하는 것입니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> ": " 를 하지 .minimum-scale, 를 수동으로 할 수작업으로 줌 할 수 있습니다 그러면 페이지가 수동으로 확대/축소됩니다.
요약하면 다음과 같습니다.폼 요소의 글꼴 크기를 16px 이상으로 설정합니다.
했듯이, 은 '먹다'를 .maximum-scale "Meta "로viewport그러나 이는 Android 기기에서 사용자 줌을 비활성화하는 부정적인 결과를 초래합니다.(v10 이후 iOS 디바이스의 사용자 줌은 비활성화되지 않습니다.)
JavaScript를 하여 JavaScript를 으로 추가할 수 .maximum-scale "Meta "로viewport디바이스가 iOS인 경우.이것에 의해, 양쪽 모두의 메리트를 얻을 수 있습니다.사용자는 iOS 를 줌 해, 포커스에 맞추어 텍스트 필드를 줌 하는 것을 방지할 수 있습니다.
| 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) {
let content = el.getAttribute('content');
let re = /maximum\-scale=[0-9\.]+/g;
if (re.test(content)) {
content = content.replace(re, 'maximum-scale=1.0');
} else {
content = [content, 'maximum-scale=1.0'].join(', ')
}
el.setAttribute('content', content);
}
};
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();
}
input[type='text'],textarea {font-size:1em;}
단순히 글꼴 크기를 16px로 설정하는 것이 아니라 다음을 수행할 수 있습니다.
예를 들어, 입력 필드의 스타일은 다음과 같습니다.
input[type="text"] {
border-radius: 5px;
font-size: 12px;
line-height: 20px;
padding: 5px;
width: 100%;
}
를 16=/12 = 133을 사용하여 합니다.33 % 가 、 [ 시 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 로 되어 있습니다.
줌 , 퍼펙트 wayPhone Safari 력력 no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no
찾을 수 있는 확실한 방법은 없지만, 여기 해킹이 있습니다...
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" />');
}
이건 확실히 해킹이야...마우스 오버/다운이 항상 엔트리/트립을 잡지 못하는 경우가 있을 수 있지만, 제 테스트에서는 잘 작동했고, 시작이 탄탄합니다.
@jirikuchta의 답변에서 영감을 얻어 다음과 같은 CSS를 추가하여 이 문제를 해결했습니다.
#myTextArea:active {
font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}
JS도 없고 플래시 같은 건 안 보여요
의할 it it it it it it it it it it itviewportmaximum-scale=1되어 있는 나, 「iframe」을 하지 않습니다.viewport 등등.
iOS Safari와 Chrome에서 작동했습니다.입력 셀렉터의 경우 전류를 둘러싸도록 클래스 또는 ID를 설정할 수 있습니다.
@supports (-webkit-overflow-scrolling: touch) {
input {
font-size: 16px;
}
}
최근에 (오늘 :D) 이 동작을 통합해야 했습니다.콤보를 포함한 원래의 디자인 필드에 영향을 주지 않기 위해 필드의 초점에 변환을 적용하기로 했습니다.
input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
font-size: 16px;
}
다음과 같이 뷰포트 메타에 user-meta=0을 추가합니다.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
나를 위해 일했어 :)
iOS7에서 동작하는 Javascript 해킹.이는 @dlo의 답변을 기반으로 하지만 마우스 오버 및 마우스 아웃 이벤트는 touchstart 및 touchnd 이벤트로 대체됩니다.기본적으로 이 스크립트는 줌을 방지하기 위해 줌이 다시 활성화되기 전에 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의 솔루션을 사용했지만 부트스트랩을 약간 수정하고 데스크톱 컴퓨터에 적용하는 다른 규칙을 적용했습니다.Bootstrap의 기본 글꼴 크기는 14px이며 줌이 발생합니다.다음은 Bootstrap의 "양식 컨트롤"을 위해 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이치노
「」::focus이치노iOS 11부터는 기본 스타일 앞에 간단한 재설정 선언을 추가할 수 있습니다(글꼴 크기가 작아서 덮어쓰지 않는 경우).
/* Prevent zoom */
select, input, textarea {
font-size: 16px;
}
Tachyons.css 등의 CSS 라이브러리의 경우 실수로 글꼴 크기를 덮어쓰기가 쉽습니다.
를 들어 클래스: ": " " 입니다.f5과 같습니다.fontSize: 1rem본문 글꼴 축척을 기본값으로 유지하면 됩니다.
클래스를 :f6 하면 '이렇게 하다'에이 됩니다.fontSize: .875rem작은 디스플레이에 올려놓습니다.선언에 대해 해야 합니다.
/* Prevent zoom */
select, input, textarea {
font-size: 16px!important;
}
@media screen and (min-width: 30em) {
/* not small */
}
2021년 솔루션...
좋아, 옛날 답안들은 다 읽었지만 하나도 통하지 않았어.몇 시간 동안 여러 가지 시도를 한 끝에 결국 해결책은 간단해 보였습니다.
input{
transform: scale(0.875);
transform-origin: left center;
margin-right: -14.28%;
}
PC의 iOS/Android/Chrome에서 테스트 완료
따라서 다른 크기가 필요한 경우 14px 글꼴을 사용할 수 있습니다. 스케일링 계수는 14/16 = 0.875이고 음수 여백은 (1 - 0.875) / 0.875 * 100입니다.
입력은 "display:flex"로 설정되어 있으며 "flex:1 1 auto"가 있기 때문에 부모에 맞게 커집니다.당신은 이것이 필요할 수도 있고 필요 없을 수도 있지만, 나는 완성도를 위해 그것을 포함시키고 있다.
잠시 후, 나는 이 해결책을 생각해 냈다.
// 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 = "";
});
「마우스 다운」에서는, 입력의 폰트 사이즈를 16 px 로 설정합니다.그러면 줌이 방지됩니다.포커스 이벤트에서는 글꼴 크기가 초기값으로 다시 변경됩니다.
이전에 게시된 솔루션과 달리 이 기능을 사용하면 입력의 글꼴 크기를 원하는 대로 설정할 수 있습니다.
여기 있는 거의 모든 행을 읽고 다양한 솔루션을 테스트한 결과, 이는 솔루션을 공유해 주신 모든 분들 덕분입니다.제가 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;}
}
다만, 「호버」상태와 「포커스」상태 사이에 폰트 사이즈가 급속히 변화해, 퍼포먼스에의 재도입에 의한 「점프」의 단점이 있습니다.
여러 답변을 검토했습니다.\
- 「 」를 .
maximum-scale=1meta태그는 iOS 기기에서는 정상적으로 동작하지만 Android 기기에서는 핀치 줌 기능을 비활성화합니다. - 「 」가 되어 있는 것.
font-size: 16px;onfocus나한테는 너무 해킹이야
를 써서 JS를 .meta붙이다
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS)
document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1, maximum-scale=1";
else
document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1";
네덜란드 대학의 웹 사이트(폼 컨트롤에 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에서만 테스트했지만 조만간 다른 버전에서도 테스트 할 예정입니다.
- 포커스 사용이벤트에서는 적어도 iOS 5.1이 필요합니다.(하지만 9보다 오래된 버전의 iOS에서 작업하는 사이트는 쿨 보너스로 볼 수 있습니다.)
- 작업하는 사이트의 대부분이 폼 컨트롤을 동적으로 작성할 수 있는 페이지가 있기 때문에 이벤트 위임 사용
- 본문이 사용 가능하게 될 때까지 기다릴 필요가 없도록 eventListeners를 html 요소(documentElement)로 설정(문서 준비/로드 상태인지 또는 DOMContentLoaded 이벤트를 기다릴 필요가 있는지 확인)
이러한 답변에도 불구하고, 무슨 일이 일어나고 있는지 파악하는 데 3일이 걸렸고, 미래에 다시 해결책이 필요할 수도 있습니다.
나의 상황은 설명한 것과 조금 달랐다.
내 책에는 만족할 만한 텍스트가 페이지의 div 안에 있었다.사용자가 일종의 단추인 Different div를 클릭했을 때, 나는 자동으로 contentable div(기존에 저장 및 클리어되었던 선택 범위)에서 일부 텍스트를 선택하고 해당 선택 항목에 대해 리치 텍스트 execCommand를 실행한 후 다시 클리어했습니다.
이것에 의해, 유저와 페이지의 다른 부분에서의 칼라·디브와의 상호 작용에 근거해 눈에 띄지 않게 텍스트·컬러를 변경할 수 있게 되어, 유저가 적절한 콘텍스트로 색을 볼 수 있도록, 통상적으로 선택 내용을 숨깁니다.
음, iPad의 Safari에서는 color div를 클릭하면 온스크린 키보드가 뜨는데, 제가 어떻게 해도 막을 수 없었습니다.
드디어 아이패드가 이걸 어떻게 하는지 알아냈어.
편집 가능한 텍스트 선택을 트리거하는 터치 스타트 및 터치 엔드 시퀀스를 수신합니다.
이 조합이 발생하면 화면에 키보드가 표시됩니다.
실제로 편집 가능한 텍스트를 확대하면서 기본 페이지를 확장하는 돌리 줌을 수행합니다.내가 보고 있는 것을 이해하는 데만 하루가 걸렸다.
그래서 제가 사용한 해결책은 터치스타트와 터치스타트를 모두 가로채는 것이었습니다.양쪽 핸들러에서 전파와 버블링을 중지하고 false를 반환합니다.하지만 만일의 경우 클릭이 트리거된 것과 같은 동작을 트리거합니다.
이전 Safari는 touchstart, mousedown, touchnd, mouseup, click이라고 생각되는 것을 트리거하고 있었습니다.또, 제 코드로 인해, 텍스트 선택이 그 순서로 행해지고 있었습니다.
가로채기 때문에 새로운 시퀀스는 단순히 텍스트 선택입니다.다른 것들은 Safari가 처리하거나 키보드 작업을 하기 전에 차단됩니다.터치 스타트 및 터치 엔드 인터셉트에서는 마우스이벤트도 트리거되지 않습니다.이러한 상황은 전혀 문제가 없습니다.
어떻게 설명해야 할지 모르겠습니다만, 문제를 처음 접한 지 1시간 이내에 이 스레드를 발견했기 때문에 여기에 두는 것이 중요하다고 생각합니다.
98%는 같은 수정이 입력함이나 다른 어떤 것에도 효과가 있다고 확신합니다.터치 이벤트를 대행 수신하여 전파 또는 버블하지 않고 개별적으로 처리합니다.또한 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
, 그 에 【javascript】, 【javascript】, 【javascript】, 【viewports】, 【javascript】, 【javascript】, 【viscript】, 【viewports】의 에 언급되어 있지 않다.text-size-adjust이치노
' 하다'로 하면 돼요.none.
다음 CSS를 추가합니다.
* {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
「」를 사용합니다.(hover: none) and (pointer: coarse)모든 터치스크린 장치를 대상으로 합니다.
여기에서는 JavaScript 또는 jQuery를 전개하는 방법에 대해 설명합니다.
그러나 CSS와 함께 조건부 글꼴 표시와 같은 우려를 통제하는 것은 완전히 가능해야 한다(그리고 가능하다).
때에는 Safari Mobile의 16px('아예')
모든 터치스크린 브라우저에 이 세심한 UX를 적용하도록 노력합시다.
그 후, 이하의 것을 채용할 수 있습니다.
@media only screen and (hover: none) and (pointer: coarse) {
input,
select,
textarea {
font-size: 11px;
}
input:focus,
select:focus,
textarea:focus {
font-size: 16px;
}
}
결과
디바이스를 ,font-size 폼 중 하나가 으로 ""로 되어 있습니다.16px.
Safari Mobile이 비활성화됩니다.auto-zoom.
사용자가 시작한 핀치줌은 모든 디바이스에서 영향을 받지 않으며 비활성화되지 않습니다.
스티븐 월시의 대답에 따르면...이 코드는 포커스에 대한 입력의 글꼴 크기를 변경하지 않고 작동합니다(불편해 보이는 경우). 또한 FastClick에서도 사용할 수 있으며, 모든 모바일 사이트에 추가하여 "snappy"를 가져올 것을 권장합니다.필요에 따라 "뷰포트 폭"을 조정합니다.
// 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)
});
여기 사람들은 JavaScript나 뷰포트 기능으로 이상한 일을 하고, 수동으로 모든 줌을 끄는 것을 봅니다.내 생각에 그건 해결책이 될 수 없을 것 같아.이 CSS 스니펫을 추가하면 글꼴 크기를 16px와 같은 고정 수치로 변경하지 않고 iOS에서 자동 줌이 꺼집니다.
디폴트로는 입력필드에서 93.8%(15px) 폰트사이즈를 사용하고 있으며 CSS 스니펫을 추가하면 93.8%에 머무릅니다.16px로 변경하거나 고정 수치로 할 필요가 없습니다.
input[type="text"]:focus,
textarea:focus {
-webkit-text-size-adjust: 100%;
}
언급URL : https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
'programing' 카테고리의 다른 글
| UILabel을 클릭 가능하게 하는 방법 (0) | 2023.04.14 |
|---|---|
| WPF 이미지에서의 비트맵 표시 방법 (0) | 2023.04.14 |
| Bash 함수에서 문자열 값을 반환하는 방법 (0) | 2023.04.09 |
| VBA를 사용한 Excel 응용 프로그램 닫기 (0) | 2023.04.09 |
| iOS8에서 Swift를 사용하여 특정 ViewController의 상태 표시줄 색상 변경 (0) | 2023.04.09 |