我有什么?
问题: 我需要适用于所有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);
}
但我上面描述的解决方案无济于事。有谁知道可以帮助我做到的解决方案?
答案 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);
})();
}