[javascript] 웹 앱의 ‘선택’에서 iPhone이 확대되지 않도록 방지

Program / 글쓴이

이 코드가 있습니다.

<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 조작으로만이 문제를 해결하는 꽤 깔끔한 해결 방법을 찾았습니다. 제 경우에는 디자인상의 이유로 글꼴 ​​크기를 변경할 수 없었고 확대 / 축소도 비활성화 할 수 없었습니다.

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

예를 들어, 텍스트가 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 미만인 경우 페이지를 확대하여 더 큰 입력 필드를 표시합니다.

필드를 클릭하면 페이지가 확대됩니다. 클릭하면 16px로 만든 다음 기본값으로 변경합니다.

아래 스 니펫은 나에게 잘 작동하며 모바일 장치를 대상으로합니다.

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

스 니펫 확장