Điểm của 'meta viewport user-scalable = no' trong API Google Maps là gì

98

Tôi đang sử dụng API V3 của Google Maps JavaScript và các ví dụ chính thức luôn có bạn bao gồm thẻ meta này:

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

Hầu hết các ví dụ của bên thứ 3 mà tôi đã thấy cũng làm điều đó. Tuy nhiên, tôi đã viết một plugin bằng cách sử dụng nó và một trong những người dùng của tôi đã nói với tôi rằng nó ngăn anh ta có thể phóng to và thu nhỏ trên thiết bị di động của mình . Tôi không có thiết bị di động để kiểm tra và không có tìm kiếm nào của tôi tiết lộ bất kỳ thông tin hữu ích nào.

Vậy, điểm của thẻ là gì? Tôi có nên để nó trong không? Tôi có nên cố gắng phát hiện tác nhân trình duyệt và chỉ hiển thị nó cho các trình duyệt trên máy tính để bàn không?

Nếu bạn muốn kiểm tra plugin, bạn có thể tải xuống , duyệt qua nguồn hoặc xem ví dụ trực tiếp .

— Ian Dunn
nguồn

btw, Chrome viết trong bảng điều khiển "Khóa" người dùng có thể mở rộng "không được nhận dạng và bỏ qua." nếu bạn sử dụng nó, ngay cả với "có" giá trị - OOPS, chỉ cần nhận thấy tôi có một "e" trong "khả năng mở rộng", như thể nó có thể có "quy mô (một con rồng) :-)

— George Birbilis

110

Trên nhiều thiết bị (chẳng hạn như iPhone), nó ngăn người dùng sử dụng tính năng thu phóng của trình duyệt. Nếu bạn có bản đồ và trình duyệt thực hiện việc thu phóng, thì người dùng sẽ thấy một hình ảnh có pixel lớn với các nhãn pixel lớn. Ý tưởng là người dùng nên sử dụng tính năng thu phóng do Google Maps cung cấp. Không chắc chắn về bất kỳ tương tác nào với plugin của bạn, nhưng đó là những gì nó ở đó.

Gần đây hơn, như @ehfeng lưu ý trong câu trả lời của mình, Chrome dành cho Android (và có thể cả những người khác) đã tận dụng thực tế là không có trình duyệt gốc nào phóng to trên các trang có thẻ chế độ xem như vậy. Điều này cho phép họ loại bỏ độ trễ 300ms đáng sợ đối với các sự kiện chạm mà trình duyệt phải chờ và xem liệu một lần chạm của bạn có kết thúc là một lần chạm hai lần hay không. (Hãy nghĩ đến "nhấp một lần" và "nhấp đúp".) Tuy nhiên, khi câu hỏi này được hỏi ban đầu (vào năm 2011), điều này không đúng trong bất kỳ trình duyệt di động nào. Nó chỉ tăng thêm sự tuyệt vời mà tình cờ phát sinh gần đây hơn.

— Trott
nguồn

Tôi nghĩ rằng nó chỉ vô hiệu hóa tính năng phóng to trong iphone, ipad .. đồ safari. Android của tôi chỉ bỏ qua nó (phần người dùng có thể mở rộng, tất nhiên không phải phần còn lại của thẻ chế độ xem)

— Juan

@Juan Nó không chỉ là thứ iOS / Safari. Tôi cá rằng nó được triển khai trong Chrome dành cho Android chẳng hạn. Nhưng có, công cụ khung nhìn không hoạt động trong nhiều trình duyệt Android 2.X.

— Trott

1

Đừng làm vậy. Nó làm cho một số trang web không thể sử dụng được trên Firefox dành cho Android (và có thể những trang khác). Bạn không thể chắc chắn rằng trang của mình sẽ hiển thị chính xác trên tất cả các trình duyệt và nếu bạn xóa tính năng thu phóng, một số người dùng sẽ không thể sử dụng trang web của bạn. Chỉ hơn 0,3 giây. Yahoo Tech là một ví dụ nếu một trang web không thể đọc được trên Firefox dành cho Android vì không thể thu phóng nó.

— Josh

một tác dụng phụ thú vị hơn với người sử dụng khả năng mở rộng = không là nó khắc phục vấn đề với vị trí: menu cố định trên các trình duyệt Android 2.x (mặc dù bạn có thể sử dụng -webkit-backface-visibility: hidden;)

— Christian Butzke

46

Việc vô hiệu hóa khả năng mở rộng của người dùng (cụ thể là khả năng nhấn đúp để thu phóng) cho phép trình duyệt giảm độ trễ nhấp chuột. Trong các trình duyệt hỗ trợ cảm ứng, khi người dùng mong đợi nhấn đúp để thu phóng, trình duyệt thường đợi 300ms trước khi kích hoạt sự kiện nhấp, chờ xem liệu người dùng có nhấn đúp hay không. Việc tắt khả năng mở rộng người dùng cho phép trình duyệt Chrome kích hoạt sự kiện nhấp chuột ngay lập tức, cho phép trải nghiệm người dùng tốt hơn.

Từ phiên Google IO 2013 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

Cập nhật: nó không còn đúng nữa, <meta name="viewport" content="width=device-width">đủ để loại bỏ độ trễ 300ms

— ehfeng
nguồn

mặt khác, điều này không tốt cho khả năng tiếp cận cho người dùng khuyết tật. Tôi tin rằng hướng dẫn của phần 508 chỉ định rằng người dùng phải có thể phóng to lên đến 200%

— Graham Fowles

9

Từ tài liệu v3 (Hướng dẫn của nhà phát triển> Khái niệm> Phát triển cho thiết bị di động):

Các thiết bị Android và iOS tôn trọng <meta>thẻ sau :
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Cài đặt này chỉ định rằng bản đồ phải được hiển thị toàn màn hình và người dùng không nên thay đổi kích thước. Lưu ý rằng trình duyệt Safari của iPhone yêu cầu <meta>thẻ này được bao gồm trong <head>phần tử của trang .

— stank345
nguồn

3

Bạn không nên sử dụng các thẻ meta viewport ở tất cả nếu thiết kế của bạn không đáp ứng. Sử dụng sai thẻ này có thể dẫn đến bố cục bị hỏng. Bạn có thể đọc bài viết này để biết tài liệu về lý do tại sao bạn không nên sử dụng thẻ này trừ khi bạn biết mình đang làm gì. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable = no" cũng giúp ngăn hiệu ứng phóng to trên các hộp nhập iOS.

— Horia Rudan
nguồn