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

텍스트가 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;
 }
}

모든 '선택'글꼴 크기를 16px로 설정

select {글꼴 크기 : 16px; }

나는 당신이 고립 된 행동에 대해 아무것도 할 수 없다고 생각합니다.

시도 할 수있는 한 가지 방법은 페이지가 전혀 확대되지 않도록하는 것입니다. 페이지가 전화 용으로 설계된 경우 좋습니다.

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

시도 할 수있는 또 다른 방법은 일반적인 "select"문 대신 JavaScript 구문을 사용하는 것입니다. 숨겨진 div를 만들어 메뉴를 표시하고 자바 스크립트에서 클릭을 처리하세요.

행운을 빕니다!

답변 : 입력 "텍스트"태그에서 자동 확대 사용 안함-iPhone의 Safari

사용자가 확대 / 축소하는 기능을 비활성화 하지 않고도 Safari가 사용자 입력 중에 텍스트 필드를 자동으로 확대하지 못하도록 할 수 있습니다 . maximum-scale=1다른 답변에서 제안 된 사용자 척도 속성을 추가 하고 제외하십시오.

확대하면 중요한 UI 요소가 화면 밖으로 이동할 수있는 "떠 다니는"레이어에 양식이있는 경우 유용한 옵션입니다.

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

이 CSS를 추가하여 Ios의 기본 스타일을 비활성화하십시오.

-webkit-appearance: none;

이것은 input [type = search]와 같이 특별한 스타일을 갖는 다른 요소에서도 작동합니다.

이것에 대해 몇 시간 동안 읽었으며 최상의 솔루션은 여기 jquery입니다. 이는 iOS Safari의 "다음 탭"옵션에도 도움이됩니다. 여기에도 입력이 있지만 원하는대로 제거하거나 추가 할 수 있습니다. 기본적으로 mousedown은 포커스 이벤트 전에 실행되고 브라우저가 16px를 생각하도록 속입니다. 또한 포커스 아웃은 "다음 탭"기능에서 트리거되고 프로세스를 반복합니다.

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