Ngăn chặn iPhone từ phóng to ở trên 'select` trong ứng dụng web

Question

Tôi đã có mã này:

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

Chạy trong toàn màn hình ứng dụng web trên iPhone.

Khi chọn thứ gì đó từ danh sách này, iPhone sẽ phóng to trên select -kết nối. Và không thu nhỏ lại sau khi chọn thứ gì đó.

Làm cách nào để ngăn chặn điều này? Hoặc thu nhỏ lại?

Answer 1

Nó có lẽ là vì trình duyệt đang cố gắng để phóng to khu vực này kể từ cỡ chữ nhỏ hơn ngưỡng này, điều này thường xảy ra trong iphone.

Việc gán thuộc tính thẻ meta "user-scalable = no" sẽ hạn chế người dùng thu phóng ở nơi khác. Vì vấn đề là chỉ với , hãy chọn phần tử duy nhất, hãy thử sử dụng phần sau trong css của bạn, bản hack này ban đầu được sử dụng cho điện thoại di động 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: unzoom after selecting in iphone

Answer 2

Tôi không nghĩ bạn không thể làm bất cứ điều gì về hành vi này.

Một điều bạn có thể thử là giữ cho trang không thu phóng được. Điều này là tốt nếu trang của bạn được thiết kế cho điện thoại.

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

Một điều bạn có thể thử là sử dụng cấu trúc JavaScript thay vì câu lệnh "chọn" chung. Tạo div ẩn để hiển thị menu của bạn, xử lý các nhấp chuột trong javascript.

Chúc may mắn!

Answer 3

sử dụng khả năng mở rộng = không là những gì bạn cần, chỉ cần như vậy có thực sự là một câu trả lời dứt khoát cho câu hỏi này

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

Answer 4

Điều này dường như làm việc cho trường hợp của tôi trong việc giải quyết vấn đề này:

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

S uggested here bởi Christina Arasmo Beymer

Answer 5

Hãy thử điều này:

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 sẽ bị sa thải trước khi onchange để zoom sẽ được vô hiệu hóa tại thời điểm onchange là bắn. Trên chức năng onchange, ở cuối, bạn có thể khôi phục tình trạng ban đầu.

Thử nghiệm trên một chiếc iPhone 5S

Answer 6

của iPhone sẽ phóng to các lĩnh vực hình thức hơi nếu văn bản được thiết lập đến dưới 16 pixel. Tôi khuyên bạn nên đặt văn bản của trường biểu mẫu di động là 16 pixel và sau đó ghi đè kích thước xuống cho máy tính để bàn.

Câu trả lời cho biết để tắt thu phóng không hữu ích đối với người dùng được nhìn thấy một phần vẫn có thể muốn thu phóng trên các điện thoại di động nhỏ hơn.

Ví dụ:

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

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