Tỷ lệ phù hợp với nội dung web di động bằng cách sử dụng thẻ meta chế độ xem

Tôi đang cố gắng tìm hiểu cách tận dụng thẻ meta của chế độ xem di động để tự động thu phóng nội dung của trang HTML để vừa với chế độ xem web.Tỷ lệ phù hợp với nội dung web di động bằng cách sử dụng thẻ meta chế độ xem

ràng buộc:

yếu tố kích thước

HTML có thể hoặc có thể không cố định (ví dụ img có chiều rộng cố định là 640). Nói cách khác, tôi không muốn ép buộc nội dung trở nên linh hoạt và sử dụng%.
Tôi không biết kích thước của webview, tôi chỉ biết tỉ lệ của nó

Ví dụ, nếu tôi có một hình ảnh duy nhất (640x100px) Tôi muốn hình ảnh để thu nhỏ nếu webview là 300x250 (quy mô xuống để phù hợp). Mặt khác, nếu webview là 1280x200, tôi muốn hình ảnh phóng to và điền vào chế độ xem web (mở rộng cho vừa).

Sau khi đọc android docs và iOS docs trên chế độ xem, có vẻ đơn giản: vì tôi biết chiều rộng nội dung của tôi (640) tôi chỉ đặt chiều rộng khung nhìn là 640 và để cho webview quyết định xem nó có cần mở rộng nội dung hay không hoặc xuống để vừa với chế độ xem web.

Nếu tôi đặt thông tin sau đây vào trình duyệt android/iPhone HOẶC một webview 320x50, hình ảnh không thu nhỏ để vừa với chiều rộng. Tôi có thể cuộn hình ảnh sang phải và trái ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Test Viewport</title> 
    <meta name="viewport" content="width=640" /> 
    <style type="text/css"> 
    html, body { 
     margin: 0; 
     padding: 0; 
     vertical-align: top; 
    } 

    h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td 
    { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-weight: normal; 
     font-style: normal; 
     font-size: 100%; 
     line-height: 1; 
     font-family: inherit; 
     vertical-align: top; 
    }  
    </style> 
    </head> 
    <body> 
    <img src="http://www.dmacktyres.com/img/head_car_tyres.jpg"> 
    </body> 
</html>

Tôi đang làm gì sai ở đây? Thẻ meta chế độ xem chỉ thu phóng nội dung là < khu vực xem web?

Nguồn

2012-01-04 rynop

làm bạn có giải pháp cho việc này chưa? – Superbiji

Chưa có. Tôi đoán không có giải pháp đơn giản là có thể – rynop

Thử thêm kiểu = "width: 100%;" vào thẻ img. Bằng cách đó, hình ảnh sẽ lấp đầy toàn bộ chiều rộng của trang, do đó thu nhỏ lại nếu hình ảnh lớn hơn khung nhìn.

Nguồn

2012-01-10 20:49:44 AlexanderZ

có mà giải quyết vấn đề nếu tất cả mọi thứ là chất lỏng, nhưng mỗi viên đạn thứ 2 của tôi: "Tôi không muốn buộc nội dung phải được chất lỏng và sử dụng% 's". Hãy suy nghĩ về toàn bộ trang web với nhiều mục trong đó - divs, canvas, iframe, v.v. Tôi biết đã sửa trang này - Tôi muốn chế độ xem web phóng to/thu nhỏ chính xác chiều rộng cố định I chỉ định. – rynop

Thêm style="width:100%;max-width:640px" vào thẻ hình ảnh sẽ mở rộng quy mô lên chiều rộng khung nhìn, tức là đối với cửa sổ lớn hơn, nó sẽ có chiều rộng cố định.

Nguồn

2012-02-07 12:53:48 Axel

không mở rộng quy mô nhưng mở rộng ra –

Tôi nghĩ điều này sẽ giúp ích cho bạn.

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

Hãy cho tôi biết nếu nó hoạt động.

P/s: đây là một số truy vấn phương tiện cho các thiết bị tiêu chuẩn. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Nguồn

2012-09-13 16:50:03

Đơn giản và hoạt động như một nét duyên dáng –

Và với điều đó bạn sẽ không ngừng tăng tỷ lệ lên/phóng to không thể cho người dùng khiếm thị, người không thể đọc được kích thước phông chữ được chọn bởi bạn. –

Trong đầu thêm này

//Include jQuery 
<meta id="Viewport" name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

<script type="text/javascript"> 
$(function(){ 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    var ww = ($(window).width() < window.screen.width) ? $(window).width() : window.screen.width; //get proper width 
    var mw = 480; // min width of site 
    var ratio = ww/mw; //calculate ratio 
    if(ww < mw){ //smaller than minimum size 
    $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); 
    }else{ //regular size 
    $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
    } 
} 
}); 
</script>

Nguồn

2013-01-05 20:10:50 Bren1818

tốt đẹp, chỉ cần một số mod và các công trình của nó tốt đẹp – waza123

Giải pháp tốt đẹp, nhưng tôi nghĩ rằng có một lỗi đánh máy trong thẻ meta viewport. Thuộc tính phải là nội dung chứ không phải chiều rộng, phải không? –

Đối với Android có việc bổ sung các thẻ mục tiêu mật độ.

target-densitydpi=device-dpi

Vì vậy, các mã sẽ trông như thế

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

Xin lưu ý, mà tôi tin bổ sung này chỉ dành cho Android (nhưng kể từ khi bạn có câu trả lời, tôi cảm thấy đây là một thêm tốt) nhưng điều này nên hoạt động với hầu hết các thiết bị di động.

Nguồn

2013-07-22 14:13:37 Dave

Cảm ơn, thiết lập target-densitydpi = 2 đã giải quyết được vấn đề của tôi như phép thuật. –

target-densitydpi đã bị xóa khỏi WebKit http://trac.webkit.org/changeset/119527 –

Tôi có cùng vấn đề với bạn, nhưng mối lo ngại của tôi là chế độ xem danh sách. Khi tôi cố gắng cuộn danh sách xem tiêu đề cố định cũng cuộn chút ít. Vấn đề là chiều cao danh sách xem nhỏ hơn chiều cao khung nhìn (trình duyệt). Bạn chỉ cần giảm chiều cao khung nhìn của bạn thấp hơn chiều cao của thẻ nội dung (xem danh sách trong thẻ nội dung). Đây là thẻ meta của tôi;

<meta name="viewport" content="width=device-width,height=90%, user-scalable = no">

Hy vọng điều này sẽ giúp ích.Cảm ơn.

Nguồn

2014-03-26 07:35:25 shalin

ok, đây là giải pháp cuối cùng của tôi với 100% javascript mẹ đẻ:

<meta id="viewport" name="viewport"> 

<script type="text/javascript"> 
//mobile viewport hack 
(function(){ 

    function apply_viewport(){ 
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { 

     var ww = window.screen.width; 
     var mw = 800; // min width of site 
     var ratio = ww/mw; //calculate ratio 
     var viewport_meta_tag = document.getElementById('viewport'); 
     if(ww < mw){ //smaller than minimum size 
     viewport_meta_tag.setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + mw); 
     } 
     else { //regular size 
     viewport_meta_tag.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
     } 
    } 
    } 

    //ok, i need to update viewport scale if screen dimentions changed 
    window.addEventListener('resize', function(){ 
    apply_viewport(); 
    }); 

    apply_viewport(); 

}()); 
</script>

Nguồn

2016-09-22 14:49:56 saike

Tỷ lệ phù hợp với nội dung web di động bằng cách sử dụng thẻ meta chế độ xem

Trả lời

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