Toàn bộ trang web và thẻ meta chế độ xem thu phóng bị vô hiệu hóa cho tất cả các trình duyệt di động

Tôi muốn trang web của mình ở chế độ toàn màn hình và tắt thu phóng trên tất cả các thiết bị di động.Toàn bộ trang web và thẻ meta chế độ xem thu phóng bị vô hiệu hóa cho tất cả các trình duyệt di động

Với thẻ meta:

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

tôi có thể làm điều này cho iPhone/iPad, nhưng trên các thiết bị Android trang web được phóng to lên khoảng 125%.

Nếu tôi sử dụng thẻ

<meta name="viewport" content="width=max-device-width, user-scalable=no">

tôi nhận được kết quả ngược lại. Vì vậy, nó hoạt động trên Android nhưng nó không hoạt động trên iPad/iPhone.

Nguồn

2012-07-05 Coen Ponsen

+11

Tôi ghét bạn vì đã vô hiệu hóa thu phóng của tôi. Thành thật. –

Hahaha :) Đó là cách tôi nhìn thấy nó bây giờ để ... Và nó cũng hóa ra là giải pháp của tôi trở lại sau đó.Trong những ngày đầu tiên của các trang web đáp ứng, tôi cảm thấy ý tưởng này rằng việc thu phóng sẽ bị vô hiệu hóa ... –

Nhà phát triển, vui lòng KHÔNG LÀM NÀY! Điều này có thể khiến trang web của bạn hoàn toàn KHÔNG THÍCH đối với những người có thị lực kém! Chỉ cần tạo cho chế độ xem được thu nhỏ, nhưng hãy để mọi người phóng to. Chức năng này có lý do! – rickythefox

HTML

<head> 
    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'> 
</head>

jQuery

Lựa chọn 1:

$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');

Phương án 2:

var deviceSpecific = { 
    iPad: 'width=1165,user-scalable=no' 
}; 
if(navigator.userAgent.match(/iPad/i){ 
    $('meta[name=viewport]').attr('content',deviceSpecific.iPad); 
}

Tùy chọn hai là một chút nữa của một phương sách cuối cùng nếu bạn đang tìm kiếm sự không thống nhất.

Nguồn

2012-07-05 14:37:17 Alastair

Hi thx cho anwser của bạn. Tôi đã thử rằng: Trên Android nó vẫn không hiển thị đầy đủ trang và phóng to vẫn được kích hoạt. Trên ipad nó cũng thu phóng gần như phù hợp trong màn hình nhưng nếu tôi thay đổi từ cảnh quan đến chân dung hoặc ngược lại nó giữ độ phân giải đó ... Không kiểm tra tốt cho mình .. –

Tôi không có quyền truy cập vào iToys ở nhà nhưng nhìn thấy như bạn đã được sử dụng jQuery, điều này sẽ trả lời câu hỏi của bạn mặc dù có lẽ là một cách hiệu quả hơn ... – Alastair

Thật không may mỗi trình duyệt có triển khai thẻ meta khung nhìn riêng. Các kết hợp khác nhau sẽ hoạt động trên các trình duyệt khác nhau.

Android 2.2: thẻ meta chế độ xem có vẻ không được hỗ trợ chút nào.

Android 2.3.x/3.x: Bằng cách đặt sử dụng khả năng mở rộng = no bạn vô hiệu hóa các tỉ lệ của khung nhìn meta tag cho mình là tốt. Đây có lẽ là lý do tại sao tùy chọn chiều rộng của bạn không có hiệu lực. Để cho phép trình duyệt chia tỷ lệ nội dung của bạn, bạn cần đặt người dùng có thể mở rộng = yes, sau đó tắt thu phóng, bạn có thể đặt tỷ lệ tối thiểu và tối đa thành cùng một giá trị để nó không thể thu nhỏ hoặc phát triển. Đồ chơi với quy mô ban đầu cho đến khi trang web của bạn vừa khít.

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

4.x Android: Cùng quy tắc áp dụng như 2.3.x trừ min và max quy mô không được vinh dự nữa và nếu bạn sử dụng sử dụng khả năng mở rộng = yes người dùng có thể phóng to luôn, đặt nó để 'không' có nghĩa là quy mô của riêng bạn bị bỏ qua, đây là vấn đề mà tôi đang đối mặt lúc này đã lôi tôi vào câu hỏi này ... Bạn dường như không thể vô hiệu hóa thu phóng và tỷ lệ cùng lúc trong 4.x.

iOS/Safari (4.x/5.x thử nghiệm): Cân việc như mong đợi, bạn có thể vô hiệu hóa rộng với sử dụng khả năng mở rộng = 0 (từ khóa có/không không làm việc trong 4.x). iOS/Safari cũng không có khái niệm về target-densitydpi vì vậy bạn nên bỏ qua điều đó để tránh lỗi. Bạn không cần min và max vì bạn có thể tắt phóng to theo cách mong đợi.Chỉ sử dụng rộng hoặc bạn sẽ chạy vào iOS orientation bug

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

Chrome: Cân việc như mong đợi như họ làm trong iOS, min và max hân hạnh và bạn có thể tắt bằng cách sử dụng phóng to user- scalable = no.

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

Kết luận: Bạn có thể sử dụng một số JS khá đơn giản để thiết lập các nội dung phù hợp sau khi một số phát hiện trình duyệt/thiết bị cơ bản. Tôi biết loại phát hiện này được cau mày nhưng trong trường hợp này nó gần như không thể tránh khỏi vì mỗi nhà cung cấp đã đi và thực hiện điều của riêng mình! Hy vọng điều này sẽ giúp mọi người chiến đấu với chế độ xem và nếu có ai đó có giải pháp để vô hiệu hóa thu phóng trong Android 4.x KHÔNG sử dụng chế độ xem, vui lòng cho tôi biết.

[EDIT]

Android trình duyệt Chrome 4.x (mà tôi nghĩ là được cài đặt sẵn trong hầu hết các quốc gia): Bạn có thể chắc chắn rằng người dùng không thể phóng to và trang là toàn màn hình. Nhược điểm: bạn phải đảm bảo nội dung có chiều rộng cố định. Tôi chưa thử nghiệm điều này trên các phiên bản Android thấp hơn. Để làm điều này xem ví dụ:

<meta name="viewport" content="width=620, user-scalable=no" />

[EDIT 2]

iOS/Safari 7.1: Kể từ v7.1, Apple đã giới thiệu một lá cờ mới cho thẻ meta viewport gọi minimal-ui. Để hỗ trợ các ứng dụng toàn màn hình, điều này ẩn thanh địa chỉ và thanh công cụ dưới cùng để có trải nghiệm toàn màn hình (không phải là API toàn màn hình hoàn toàn nhưng đóng và không yêu cầu người dùng chấp nhận). Nó đi kèm với nó là fair share of bugs as well và không hoạt động trong iPad.

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />

[EDIT 3]

iOS/Safari 8 Beta 4: Chế độ xem thẻ meta minimal-ui nêu tại EDIT 2 hiện đã được gỡ bỏ bởi Apple trong phiên bản này. Source - WebKit Notes

Nguồn

2012-09-04 19:50:29 BrutalDev

Cảm ơn bài viết hữu ích. Tôi đã đấu tranh với chrome trên Android. Đối với trình duyệt chứng khoán Android 4.x, chúng tôi làm việc xung quanh vấn đề được đề cập bằng cách đặt chiều rộng khung nhìn theo pixel. Giả sử bạn muốn có một tỷ lệ cố định là 1,3, khung nhìn witdh phải là Math.floor ((screen.availWidth * 10)/13). Chúng tôi đặt số đó vào cookie, sau đó bắt buộc tải lại để cho phép mã phía máy chủ đặt thẻ meta chính xác. –

vui lòng cung cấp cách tiếp cận tập lệnh này mà bạn đã đề cập ... – vsync

Câu trả lời này cần nhiều phiếu bầu hơn –

Đơn giản chỉ cần sử dụng:

<meta name="HandheldFriendly" content="True" />

Hoạt động tốt trên tôi Samsung Note II và HTC Desire.

Nguồn

2013-05-23 13:40:36

hoạt động cho trình duyệt chrome android, trong trường hợp của tôi, chrome sẽ không phát hiện chế độ xem mà không thêm thẻ meta này – vangoz

Đối của Apple thiết bị rất dễ dàng:

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />

Thẻ lần đầu tiên chạy ứng dụng web trong chế độ toàn màn hình khi bạn mở nó thông qua một biểu tượng shortcut được đặt trên màn hình chủ iPhone/iPod/iPad.

Thẻ thứ hai chỉ hoạt động cùng với thẻ thứ nhất. Giá trị có thể là: mặc định, đen và đen mờ.

Thẻ thứ ba chặn chiều rộng của trang web theo kích thước chuẩn (1.0) và không cho phép thu phóng.

LƯU Ý: vì thẻ meta "apple-mobile" bị bỏ qua trên thiết bị không phải của Apple và thẻ thứ 3 là chính thức trong HTML5, bạn có thể sử dụng tất cả chúng cùng nhau.

Đối với Android bạn không phải là giải pháp toàn cầu vì không phải ai cũng sử dụng trình duyệt web android mặc định. Xem Fullscreen Web App for Android

Dưới đây một số liên kết hữu ích khác:

Lời khuyên cho iOS: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Tất cả các meta được biết đến chính thức và không chính thức: https://gist.github.com/kevinSuttle/1997924

Nguồn

2013-06-08 22:14:24

Tôi đã có tất cả các loại của các vấn đề với điều này và thậm chí bắt đầu xây dựng hệ thống phát hiện trình duyệt để phân phối các thẻ chế độ xem khác nhau cho các trình duyệt khác nhau. Sau đó, tôi quyết định thử đơn giản hóa những gì tôi đã làm và mọi thứ đã hoạt động. Đặt chế độ xem theo chiều rộng mà bạn muốn trang web của mình và xóa đi mọi thứ đang hoạt động ngay bây giờ.

<meta name="viewport" content="width=1165 />

Nguồn

2013-06-28 06:26:19

Đối với những gì nó có giá trị, đây là những gì tôi đã sử dụng để có được một trang nội dung chiều rộng 1024px đi chính xác toàn màn hình trên Nexus của tôi 7 (Android 4.2.2)/Chrome, cảnh quan chỉ mà không cần đến javascript *:

width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no

(Tôi nghĩ người dùng có thể mở rộng = không thực sự phủ nhận min- & mặc dù quy mô tối đa). Tôi nhận được giá trị .94 do dùng thử và lỗi, không phải bởi bất kỳ loại tính toán nào gọi mật độ pixel của thiết bị hoặc bất cứ thứ gì như thế.

* tức là. để buộc chiều rộng nội dung khớp với cửa sổ - tôi đã sử dụng js để viết nội dung meta chế độ xem.

Nguồn

2013-07-23 17:39:13

<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>

Nguồn

2014-05-22 01:54:49 Shakeel

Chúng tôi sử dụng Javascript sau trong tiêu đề để thiết lập các thẻ meta:

<script> 
    if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) { 
    document.write("<meta name='viewport' content='width=1165, user-scalable=no'>"); // or whichever meta tags make sense for your site 
    } else { 
    document.write("<meta name='viewport' content='width=max-device-width, user- scalable=no'>"); // again, which ever meta tags you need 
    } 
</script>

Bạn có thể thêm điều kiện bổ sung và cài đặt chúng cho các nhu cầu cụ thể của bạn.

Nguồn

2014-06-05 18:33:47

Đề xuất dưới đây từ Dan B đã làm việc tuyệt vời cho tôi, tôi đã gặp phải tất cả các vấn đề đang cố tải trang web của tôi ngay trên Android và điều này đã sắp xếp nó. Cho bây giờ anyways!

<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>

Cảm ơn!

Nguồn

2014-06-11 08:03:09 user2390584

Android cố định nó từ phiên bản 4.4.2

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

Nguồn

2014-08-15 08:41:43 jargalan

Tôi có một Samsung Galaxy Note 4 và sử dụng chrome là trình duyệt của mình. Tôi thấy nó đã bỏ qua các thẻ meta của khung nhìn, làm cho nó hoạt động với HandheldFriendly. Tôi đã kết thúc với một combo thẻ meta. Làm việc cho tôi trên Android và iOS.

<meta name="HandheldFriendly" content="True"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="viewport" content="width=YOUR_SITE_WIDTH">

Nguồn

2014-12-31 15:37:13 Giacomo

Tôi đang sử dụng mã này để tránh phóng to iPhone và sự cố đã được giải quyết nhưng một vấn đề khác nảy sinh; khi tôi bấm vào trường đầu vào toàn bộ cửa sổ nhảy lên sau đó đặt vị trí của nó thành bình thường, khi tôi nhấn nút đi cùng một hành vi xảy ra và cửa sổ nhảy. tôi cần phải thoát khỏi nhảy để chỉ cửa sổ thay đổi kích thước nó thành vị trí bình thường.

function zoomDisable(){ 
    $('head meta[name=viewport]').remove(); 
    $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />'); 
}

Nguồn

2016-02-04 04:19:03

Toàn bộ trang web và thẻ meta chế độ xem thu phóng bị vô hiệu hóa cho tất cả các trình duyệt di động

Trả lời

Các vấn đề liên quan