Масштабируемый мобильный веб-контент с использованием метатега viewport

Я пытаюсь понять, как использовать метатег мобильного просмотра, чтобы автоматически увеличивать содержимое HTML-страницы, чтобы вписаться в веб-представление.

Ограничения:

HTML может содержать или не иметь элементы фиксированного размера (ex img имеет фиксированную ширину 640). Другими словами, я не хочу, чтобы содержимое было жидким и использовало%.
Я не знаю размер webview, я просто знаю его соотношение сторон

Например, если у меня есть одно изображение (640x100px), я хочу, чтобы изображение уменьшалось, если веб-просмотр составляет 300x250 (уменьшите масштаб до соответствия). С другой стороны, если веб-просмотр составляет 1280x200, я хочу, чтобы изображение увеличивалось и заполняло веб-просмотр (масштабирование до соответствия).

После чтения android docs и iOS docs в видовых экранах, кажется простым: поскольку я знаю ширину моего содержимого (640), я просто установил ширину видового экрана на 640, и пусть веб-просмотр решит, нужно ли масштабировать контент вверх или вниз, чтобы соответствовать WebView.

Если я поместил следующее в свой браузер Android и iPhone или веб-просмотр 320x50, изображение не будет уменьшаться в соответствии с шириной. Я могу прокрутить изображение вправо и влево.

<!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>

Что я здесь делаю неправильно? Метатег видового экрана увеличивает только контент, который является < область веб-просмотра?

Ответ 1

В голове добавьте это

//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>

Ответ 2

Я думаю, это должно помочь вам.

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

Скажите, если это сработает.

P/s: вот несколько медиа-запросов для стандартных устройств. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Ответ 3

Для Android есть добавление тега плотности целевой.

target-densitydpi=device-dpi

Итак, код будет выглядеть как

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

Обратите внимание, что я считаю, что это дополнение предназначено только для Android (но поскольку у вас есть ответы, я чувствовал, что это было очень полезно), но это должно работать на большинстве мобильных устройств.

Ответ 4

ok, вот мое окончательное решение со 100% встроенным javascript:

<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>

Ответ 5

Добавление style="width:100%;max-width:640px" в тег изображения масштабирует его до ширины окна просмотра, то есть для больших окон будет выглядеть фиксированная ширина.

Ответ 6

Попробуйте добавить стиль = "width: 100%;" к тегу img. Таким образом, изображение заполнит всю ширину страницы, уменьшив масштаб изображения, если изображение больше, чем область просмотра.

Ответ 7

У меня была такая же проблема, как у вас, но моя забота была о просмотре списка. Когда я пытаюсь прокрутить список, просмотр фиксированного заголовка также немного прокручивается. Проблема заключалась в том, что высота представления списка меньше, чем высота окна просмотра (браузера). Вам просто нужно уменьшить высоту видового экрана ниже, чем высота тега контента (просмотр списка в теге контента). Вот мой метатег;

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

Надеюсь, это поможет .Thnks.