웹 앱의 '선택'에서 iPhone이 확대되지 않도록 방지

웹 앱의 '선택'에서 iPhone이 확대되지 않도록 방지

---

이 코드가 있습니다.

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

iPhone의 전체 화면 웹 앱에서 실행 중입니다.

이 목록에서 항목을 선택하면 iPhone이- select요소를 확대합니다 . 그리고 무언가를 선택한 후 다시 축소하지 않습니다.

어떻게 방지 할 수 있습니까? 아니면 다시 축소 하시겠습니까?

---

글꼴 크기가 임계 값보다 작기 때문에 브라우저가 영역을 확대하려고했기 때문일 수 있습니다. 이는 일반적으로 iPhone에서 발생합니다.

메타 태그 속성 "user-scalable = no"를 지정하면 사용자가 다른 곳에서 확대 / 축소 할 수 없습니다. 문제는 선택 요소에만 해당되므로 CSS에서 다음을 사용해보십시오.이 해킹은 원래 jquery 모바일에 사용되었습니다.

HTML :

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

CSS :

select{
font-size: 50px;
}

src : 아이폰에서 선택한 후 확대 해제

---

user-scalable = no가 필요한 것이므로 실제로이 질문에 대한 확실한 답이 있습니다.

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

---

이것은이 문제를 해결하는 내 경우에 효과가있는 것 같습니다.

@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
        font-size: 16px;
    }
}

Christina Arasmo Beymer가 여기 에서 제안 함

---

iPhone은 텍스트가 16 픽셀 미만으로 설정된 경우 양식 필드를 약간 확대합니다 . 모바일 양식 필드의 텍스트를 16 픽셀로 설정 한 다음 데스크톱의 크기를 다시 재정의하는 것이 좋습니다.

확대 / 축소 비활성화에 대한 답변은 부분적으로 시력을 잃은 사용자에게 도움이되지 않습니다.

예:

# Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

---

나는 파티에 조금 늦었지만 CSS 조작으로만이 문제를 해결하는 꽤 깔끔한 해결 방법을 찾았습니다. 제 경우에는 디자인상의 이유로 글꼴 ​​크기를 변경할 수 없었고 확대 / 축소도 비활성화 할 수 없었습니다.

iPhone은 텍스트가 16 픽셀 미만으로 설정된 경우 양식 필드를 약간 확대하기 때문에 iPhone이 글꼴 크기가 16 픽셀이라고 생각하도록 속인 다음 크기로 변환 할 수 있습니다.

예를 들어 텍스트가 14px 일 때 예를 들어 보겠습니다. 16px보다 작기 때문에 확대 / 축소합니다. 따라서 0.875에 따라 스케일을 변환 할 수 있습니다.

다음 예제에서는 그에 따라 다른 속성을 변환하는 방법을 보여주기 위해 패딩을 추가했습니다.

.no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

도움이 되었기를 바랍니다.

---

이 시도:

function DisablePinchZoom() 
{
    $('meta[name=viewport]').attr("content", "");
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

DisablePinchZoom이 onchange 전에 실행되므로 onchange가 실행될 때 zoom이 비활성화됩니다. onchange 기능에서 마지막에 초기 상황을 복원 할 수 있습니다.

iPhone 5S에서 테스트 됨

---

iOS는 글꼴 크기가 16px 미만인 경우 페이지를 확대하여 더 큰 입력 필드를 표시합니다.

only On click of any field, it's zooming the page. so on click, we are making it as 16px and then changed to default value

below snippet works fine to me and targeted for mobile devices,

@media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}

---

I don't think you can't do anything about the behavior in isolation.

One thing you can try is keep the page from zooming at all. This is good if your page is designed for the phone.

<meta name="viewport" content="width=device-width" />

Another thing you could try is using a JavaScript construct instead of the generic "select" statement. Create a hidden div to show your menu, process the clicks in javascript.

Good luck!

---

As answered here: Disable Auto Zoom in Input "Text" tag - Safari on iPhone

You can prevent Safari from automatically zooming in on text fields during user input without disabling the user’s ability to pinch zoom. Just add maximum-scale=1 but leave out the user-scale attribute suggested in other answers.

It is a worthwhile option if you have a form in a layer that “floats” around if zoomed, which can cause important UI elements to move off screen.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

---

Try adding this CSS to disable Ios' default styling:

-webkit-appearance: none;

This will also work on other elements that get special styling, like input[type=search].

---

Been reading for a few hours on this and the best solution is this jquery here. This also helps with the "next tab" option in iOS Safari. I have inputs here as well but feel free to remove them or add as you like. Basically the mousedown fires before the focus event and tricks the browser into thinking its 16px. In addition, the focusout will trigger on the "next tab" feature and repeat the process.

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})

---

Set all 'select' font size to 16px

select{ font-size: 16px; }

참고URL : https://stackoverflow.com/questions/6483425/prevent-iphone-from-zooming-in-on-select-in-web-app