Ngăn iPhone phóng to `chọn` trong ứng dụng web

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 ứng dụng web toàn màn hình trên iPhone.

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

Làm thế nào tôi có thể ngăn chặn điều này? Hay thu nhỏ lại?

Có thể là do trình duyệt đang cố gắng thu phóng khu vực vì kích thước phông chữ nhỏ hơn ngưỡng, điều này thường xảy ra trong iPhone.

Việc cung cấp thuộc tính thẻ meta "user-scalable = no" sẽ hạn chế người dùng phóng to ở nơi khác. Vì vấn đề chỉ xảy ra với phần tử được chọn , 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 sau khi chọn trong iphone

user-scalable = không là thứ bạn cần, vì vậy thực sự có 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">

Điều này dường như hiệu quả với 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;
    }
}

Do Christina Arasmo Beymer đề xuất ở đây

iPhone sẽ phóng to các trường biểu mẫu một chút nếu văn bản được đặt 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 thành 16 pixel và sau đó ghi đè kích thước trở lại cho máy tính để bàn.

Các câu trả lời nói rằng tắt tính năng thu phóng là vô ích đối với những người dùng bị cận một phần có thể vẫn muốn phóng to trên điện thoại di động nhỏ hơn.

Thí dụ:

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

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

Tôi đến bữa tiệc hơi muộn, nhưng tôi đã tìm thấy một giải pháp khá gọn gàng giải quyết vấn đề này chỉ với thao tác css. Trong trường hợp của tôi, tôi không thể thay đổi kích thước phông chữ vì lý do thiết kế và tôi cũng không thể tắt tính năng thu phóng.

Vì iPhone sẽ phóng to các trường biểu mẫu một chút nếu văn bản được đặt thành nhỏ hơn 16 pixel, chúng ta có thể đánh lừa iPhone nghĩ rằng kích thước phông chữ là 16px và sau đó biến đổi nó thành kích thước của chúng ta.

Ví dụ: hãy lấy ví dụ khi văn bản của chúng ta là 14px, vì vậy nó sẽ thu phóng vì nó nhỏ hơn 16px. Do đó, chúng ta có thể chuyển đổi thang đo, theo 0,875.

Trong ví dụ sau, tôi đã thêm phần đệm để hiển thị cách chuyển đổi các thuộc tính khác cho phù hợp.

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

Tôi hy vọng nó sẽ giúp!

Thử đi:

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ẽ được kích hoạt trước onchange nên tính năng thu phóng sẽ bị vô hiệu hóa tại thời điểm onchange được kích hoạt. Trên chức năng onchange, khi kết thúc, bạn có thể khôi phục lại tình trạng ban đầu.

Đã thử nghiệm trên iPhone 5S

iOS phóng to trang để hiển thị trường nhập lớn hơn nếu kích thước phông chữ của nó nhỏ hơn 16px.

chỉ Khi nhấp vào bất kỳ trường nào, nó sẽ thu phóng trang. vì vậy khi nhấp chuột, chúng tôi đang đặt nó thành 16px và sau đó thay đổi thành giá trị mặc định

đoạn mã dưới đây phù hợp với tôi và được nhắm mục tiêu cho các thiết bị di động,

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

Đặt tất cả kích thước phông chữ 'select' thành 16px

chọn {font-size: 16px; }

Tôi không nghĩ rằng bạn không thể làm bất cứ điều gì về hành vi một cách cô lập.

Một điều bạn có thể thử là giữ cho trang không bị phóng to. Điều này rất 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 khác bạn có thể thử là sử dụng một cấu trúc JavaScript thay vì câu lệnh chung chung "select". Tạo một 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!

Như đã trả lời ở đây: Tắt Tự động phóng to thẻ "Văn bản" Nhập - Safari trên iPhone

Bạn có thể ngăn Safari tự động phóng to các trường văn bản trong quá trình nhập liệu của người dùng mà không vô hiệu hóa khả năng chụm thu phóng của người dùng. Chỉ cần thêm maximum-scale=1nhưng bỏ đi thuộc tính quy mô người dùng được đề xuất trong các câu trả lời khác.

Đó là một tùy chọn đáng giá nếu bạn có một biểu mẫu trong một lớp “nổi” xung quanh nếu được thu phóng, điều này có thể khiến các phần tử giao diện người dùng quan trọng di chuyển khỏi màn hình.

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

Hãy thử thêm CSS này để tắt kiểu mặc định của Ios:

-webkit-appearance: none;

Điều này cũng sẽ hoạt động trên các phần tử khác có kiểu đặc biệt, như input [type = search].

Đã đọc vài giờ về điều này và giải pháp tốt nhất là jquery này ở đây. Điều này cũng giúp với tùy chọn "tab tiếp theo" trong iOS Safari. Tôi cũng có thông tin đầu vào ở đây nhưng vui lòng xóa chúng hoặc thêm tùy thích. Về cơ bản, mousedown kích hoạt trước sự kiện tiêu điểm và đánh lừa trình duyệt suy nghĩ về 16px của nó. Ngoài ra, tiêu điểm sẽ kích hoạt tính năng "tab tiếp theo" và lặp lại quá trình.

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