需要将应用宽度适合设备宽度

时间:2015-01-23 14:02:49

标签: javascript android html cordova meta

我有什么?

  1. 网络应用程序(只是html,css,js),应用程序有固定的宽度和高度(1024 * 768);
  2. 通过网络应用程序使用cordova创建的Android应用程序;
  3. 在htc desire 500上测试android应用程序(android版本4.1.2)
  4. 问题: 我需要适用于所有Android设备上的设备宽度的应用程序宽度。现在我的应用程序比设备宽度大。

    我想做什么?

    以不同的方式更改了视口元标记,例如

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

    使用javascript更改应用缩放(在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);
    }
    

    但我上面描述的解决方案无济于事。有谁知道可以帮助我做到的解决方案?

1 个答案:

答案 0 :(得分:1)

我通过使用css转换解决了问题,这个css属性类似于缩放,但是所有现代浏览器都支持它。 注意:此解决方案仅适用于固定大小的布局

我写的函数来解决我的问题(只需将body作为元素,并将其初始大小作为高度和宽度):

/**
 * @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);
        })();
    }