Необходима ширина приложения до ширины устройства

Question

Что у меня?

1. Веб-приложение (только HTML, CSS, JS), приложение имеет фиксированную ширину и высоту (1024 * 768);
2. Приложение для Android, созданное с помощью кордовы с помощью веб-приложения;
3. Тестирование приложений Android на HTC Desire 500 (Android версии 4.1.2)

Проблема: мне нужно ширину приложения к ширине подходят устройства на всех устройствах Android. Теперь мое приложение больше, чем ширина устройства.

Что я пытался сделать?

Изменен видовой мета-тег по-разному, как

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

Используется яваскрипт изменить приложение увеличение (на deviceredy события)

var contentWidth = document.body.scrollWidth, 
    windowWidth = window.innerWidth, 
    newScale = windowWidth/contentWidth; 
    document.body.style.zoom = newScale; 

Используется JavaScript для изменения видового экрана

var ww = (jQuery(window).width() < window.screen.width) ? 
    jQuery(window).width() : window.screen.width; 
// min width of site 
var mw = 1020; 
//calculate ratio 
var ratio = ww/mw; 
if (ww < mw) { 
    jQuery('meta[type="viewport"]').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); 
} else { 
    jQuery('meta[type="viewport"]').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
} 

Но решения, которые я описываю выше, не могут помочь. Кто-нибудь знает решение, которое может помочь сделать то, что мне нужно?

Answer 1

Я решил проблему с помощью преобразования css, это свойство css аналогично масштабированию, но оно поддерживается всеми современными браузерами. Примечание: Это решение целесообразно только для фиксированных макетов размера

функций, которые я написал, чтобы решить мою проблему (Просто положите тело как элемент, и его первоначальный размер, как высота и ширина):

/** 
* @param {string} element - element to apply zooming 
* @param {int} width - initial element width 
* @param {int} height - initial element heigth 
* @param {float} desiredZoom - which zoom you need, default value = 1 
*/  
function zoomElement(element, width, height, desiredZoom) { 
     desiredZoom = desiredZoom || 1; 
     var zoomX = (jQuery(window).width() * desiredZoom)/width, 
      zoomY = (jQuery(window).height() * desiredZoom)/height, 
      zoom = (zoomX < zoomY) ? zoomX : zoomY; 

     jQuery(element) 
      .css('transform', 'scale(' + zoom + ')') 
      .css('transform-origin', '0 0') 
      // Internet Explorer 
      .css('-ms-transform', 'scale(' + zoom + ')') 
      .css('-ms-transform-origin', '0 0') 
      // Firefox 
      .css('-moz-transform', 'scale(' + zoom + ')') 
      .css('-moz-transform-origin', '0 0') 
      // Opera 
      .css('-o-transform', 'scale(' + zoom + ')') 
      .css('-o-transform-origin', '0 0') 
      // WebKit 
      .css('-webkit-transform', 'scale(' + zoom + ')') 
      .css('-webkit-transform-origin', '0 0'); 

     // Center element in it`s parent 
     (function() { 
      var $element = jQuery(element); 

      // Remove previous timeout 
      if ($element.data('center.timeout')) { 
       console.log("clear timeout"); 
       clearTimeout($element.data('center.timeout')); 
      } 

      var timeout = setTimeout(function() { 
       $element.data('center.timeout', timeout); 
       var parentSize = { 
         'height' : $element.parent().height(), 
         'width' : $element.parent().width() 
        }, 
        rect = element.get(0).getBoundingClientRect(); 

       element.css({ 
        'marginTop' : 0, 
        'marginLeft' : 0 
       }); 

       // Center vertically 
       if (parentSize.height > rect.height) { 
        var marginTop = (parentSize.height - rect.height)/2; 
        element.css('marginTop', marginTop); 
       } 

       // Center horizontally 
       if (parentSize.width > rect.width) { 
        var marginLeft = (parentSize.width - rect.width)/2; 
        element.css('marginLeft', marginLeft); 
       } 
      }, 300); 
     })(); 
    }