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

Ответ 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.