it-swarm.com.ru

масштабировать подгонку мобильного веб-контента, используя метатег viewport

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

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

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

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

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

Если я добавлю в свой браузер Android/iPhone OR следующее: веб-просмотр 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>

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

33
rynop

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

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

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

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

19
Daniel Ta

Для 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 (но поскольку у вас есть ответы, я чувствую, что это хорошее дополнение), но это должно работать для большинства мобильных устройств.

8
Dave

хорошо, вот мое окончательное решение со 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
saike

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

2
Axel

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

0
AlexanderZ

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

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

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

0
shalin