Làm cách nào tôi có thể vô hiệu hóa zoom zoom trên một trang web di động?

316

Tôi đang tạo một trang web di động về cơ bản là một hình thức lớn với một vài kiểu nhập văn bản.

Tuy nhiên (ít nhất là trên điện thoại di động Android của tôi), mỗi lần tôi nhấp vào một số đầu vào, toàn bộ trang sẽ phóng to ở đó, che khuất phần còn lại của trang. Có một số lệnh HTML hoặc CSS để vô hiệu hóa loại phóng to này trên các trang web moble không?

html css mobile

— Người sửa chữa Martín
nguồn

3

Như Greg đã nói ở trên, nếu tôi vào một trang web di động vô hiệu hóa thu phóng, điều đầu tiên tôi thường làm là nhấn nút quay lại (trừ khi đó là thứ tôi thực sự phải xem), và tôi chắc chắn tôi không phải là người duy nhất . Hơn nữa, nói theo kinh nghiệm của tôi, hầu hết các trang web bị vô hiệu hóa thu phóng cũng sử dụng các phông chữ nhỏ, điều này khiến việc đọc văn bản trở nên khó khăn và rất khó chịu.

— tomasz86

8

Tôi đồng ý rằng nó không nên bị vô hiệu hóa đối với hầu hết các trang web, nhưng có một số trường hợp sử dụng mà bạn có thể muốn tắt thu phóng mặc định - chẳng hạn như các trò chơi web trên thiết bị di động nơi bạn có thể muốn ghi đè thu phóng để làm việc khác.

— Lu-ca

11

Bạn không - Nếu người dùng muốn phóng to thì hãy để họ làm điều đó. Bên cạnh đó: Chrome có một tùy chọn để bỏ qua yêu cầu của bạn.

— Martin

2

Đối với người dùng Android Firefox, có tiện ích Luôn thu phóng cho Firefox . Rất khuyến khích.

— Colin D Bennett

2

Từ iOS 10 , user-scalable=nobị bỏ qua. Xem cái này

— Raptor

443

Đây phải là tất cả mọi thứ bạn cần

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>

— lò xo
nguồn

23

điều này cũng vô hiệu hóa khả năng phóng to của người dùng nói chung, cũng như khả năng tự động điều chỉnh của trình duyệt theo cách trang phù hợp với chế độ xem - tất cả những gì Martin đang tìm kiếm là một cách để vô hiệu hóa 'phóng to khi nhấp vào đầu vào' hành vi.

— matt lohkamp

3

Ngay bây giờ ai đó ở Posterous đã làm điều đó, trong khi có phông chữ ở mức 12px nên không thể đọc được và tôi không thể tìm thấy cách nào xung quanh nó.

— Emil Ivanov

41

Mọi người khiếm thị, bao gồm cả bản thân tôi, ghét điều này hơn bất cứ điều gì. Tôi phải chụp màn hình các trang làm điều này và sau đó phóng to chúng trong trình xem ảnh.

— Jack Marchetti

6

Thẻ meta thứ hai làm gì? Không phải là width=device-widthđã có trong thẻ meta đầu tiên?

— Lu-ca

1

điều này dường như không hoạt động trên iOS 7. Xem câu trả lời

— lukad03

159

Đối với những người đến muộn trong bữa tiệc, câu trả lời của kgutteridge không phù hợp với tôi và câu trả lời của Benny Neugebauer bao gồm mục tiêu-mật độ (một tính năng đang bị phản đối ).

Điều này tuy nhiên làm việc cho tôi:

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

— Luke Keller
nguồn

7

Đây là câu trả lời đúng bây giờ. Các câu trả lời khác không còn hoạt động (ít nhất là cho iOS 7).

— KyleFarris

7

Bất cứ ai cũng đã thử điều này trên iOS 10.x Tôi không nghĩ nó hoạt động?

— JMac

Không làm việc cho tôi. Nó thay đổi kích thước tất cả màn hình với thanh cuộn và zoom xấu.

— Cocorico

1

Vẫn không hoạt động trên Safari / iOS 11 do sự cố SFB tại Apple.

— 15ee8f99-57ff-4f92-890c-b56153

52

Có một số cách tiếp cận ở đây - và mặc dù vị trí là thông thường người dùng không nên bị hạn chế khi phóng to cho mục đích tiếp cận, có thể có những trường hợp cần thiết:

Kết xuất trang ở chiều rộng của thiết bị, không chia tỷ lệ:

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

Ngăn chặn tỷ lệ- và ngăn người dùng có thể phóng to:

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

Loại bỏ tất cả thu phóng, tất cả tỷ lệ

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

— SW4
nguồn

"Thông thường người dùng không nên bị hạn chế" nhưng khi phát triển ứng dụng web cho thiết bị di động, bạn thường phải đối phó với "zom-in về tiêu điểm đầu vào". Tôi thấy nó hữu ích để vô hiệu hóa phóng to trong trường hợp đó.

— Le 'nton

@ Le'nton vô hiệu hóa thu phóng trên toàn bộ trang không phải là một cách tốt để đối phó với thu phóng trên tiêu điểm đầu vào. Trên iOS ít nhất, có thể tắt thu phóng tiêu điểm đầu vào bằng cách tăng kích thước phông chữ của đầu vào.

— pfg

39

Bạn có thể dùng:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

Nhưng xin lưu ý rằng với Android 4.4, mật độ mục tiêu thuộc tính không còn được hỗ trợ . Vì vậy, đối với Android 4.4 trở lên, những điều sau đây được đề xuất là cách thực hành tốt nhất:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

— Benny Neugebauer
nguồn

35

Vì vẫn chưa có giải pháp cho vấn đề ban đầu, đây là CSS hai xu thuần túy của tôi.

Các trình duyệt di động (hầu hết trong số chúng) yêu cầu kích thước phông chữ trong đầu vào là 16px. Vì thế

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

Mở rộng đoạn trích

giải quyết vấn đề Vì vậy, bạn không cần phải tắt tính năng phóng to và thu nhỏ của trang web.

Nếu kích thước phông chữ cơ sở của bạn không phải là 16px hoặc không phải là 16px trên điện thoại di động, bạn có thể sử dụng truy vấn phương tiện.

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}

Mở rộng đoạn trích

— Azamat Rasulov
nguồn

2

Tại sao giải pháp này có rất ít phiếu bầu? Đó là cách tốt nhất để tránh thu phóng hình thức nhấp chuột.

— KlausCPH

1

Đúng; Điều này cũng giải quyết vấn đề của tôi! Tôi không muốn tắt phóng to hoàn toàn và đây chỉ là thứ tôi cần.

— brendan

1

Bạn cũng có thể đặt font-size: 1remcho toàn bộ trang, vì vậy phông chữ sẽ thay đổi tỷ lệ độc đáo, đồng thời tránh vấn đề "lấy nét khi phóng to".

— itachi

12

vui lòng thử thêm thẻ meta và kiểu này

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


<style>
body{
        touch-action: manipulation;
    }
</style>

— Sarath Ak
nguồn

1

không nên touch-actionđược đặt thành none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

— rahulroy9202

@ rahulroy9202 cho tôi touch-action: manipulation;làm việc tốt. touch-action: none;không làm gì cả

— Umair

7

Có vẻ như chỉ cần thêm thẻ meta vào index.html không ngăn trang thu phóng. Thêm phong cách dưới đây sẽ làm điều kỳ diệu.

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

EDIT: Demo: https://no-mobile-zoom.stackblitz.io

— Api
nguồn

2

Điều này nên được chấp nhận sửa chữa, cũng hoạt động trên điện thoại di động safari ios13 atm

— Magico

Nó hoạt động như mong đợi từ điện thoại di động, cảm ơn! kiểm tra tại đây proyecto26.com/animitable-component

— jdnichollsc

6

Giải pháp khả thi cho các ứng dụng web: Mặc dù không thể vô hiệu hóa thu phóng trong iOS Safari, nhưng nó sẽ bị vô hiệu hóa khi mở trang web từ một phím tắt trên màn hình chính.

Thêm các thẻ meta này để khai báo Ứng dụng của bạn là "Ứng dụng web có khả năng":

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

Tuy nhiên, chỉ sử dụng tính năng này nếu ứng dụng của bạn tự duy trì, vì các nút chuyển tiếp / lùi và thanh URL cũng như các tùy chọn chia sẻ bị tắt. (Bạn vẫn có thể vuốt sang trái và phải) Tuy nhiên, cách tiếp cận này cho phép khá nhiều ứng dụng như ux. Trình duyệt toàn màn hình chỉ bắt đầu khi trang web được tải từ màn hình chính. ~~Tôi cũng chỉ làm cho nó hoạt động sau khi tôi bao gồm một apple-touch-icon-180x180.png trong thư mục gốc của mình.~~

Là một phần thưởng, có lẽ bạn cũng muốn bao gồm một biến thể của aswell này:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

— khử nhiễu
nguồn

1

Bạn có thể hoàn thành nhiệm vụ bằng cách thêm phần tử 'meta' sau vào 'đầu' của mình:

<meta name="viewport" content="user-scalable=no">

Thêm tất cả các thuộc tính như 'chiều rộng', 'tỷ lệ ban đầu', 'chiều rộng tối đa', 'tỷ lệ tối đa' có thể không hoạt động. Do đó, chỉ cần thêm các yếu tố trên.

— Kasumi Gunasekara
nguồn

-1

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

Vui lòng thêm tập lệnh để vô hiệu hóa pinch, nhấn, tập trung Thu phóng

— Prem
nguồn