Question

我有这个JS功能，它将页面上的所有内容都集中在一起。这在页面开头调用，并在调整窗口大小时自动居中。

在网页加载到移动设备上时，我需要一种方法使功能不居中。

 /**
     * This method centers a DOM element vertically and horizontally
     * on the page.
     * 
     * @param {object} elementHandle The object that is going to be 
     * centered.
     */
    centerElementOnPage: function(elementHandle) {
        // Center main frame vertical middle
        $(window).resize(function() {
            var elementLeft = ($(window).width() - elementHandle.outerWidth()) / 2;
            var elementTop = ($(window).height() - elementHandle.outerHeight()) / 2;
            elementTop = (elementTop > 0 ) ? elementTop : 20;

            elementHandle.css({
                position: 'absolute',
                left: elementLeft,
                top: elementTop
            }); 
        });
        $(window).resize();
    },

编辑：

感谢你的css。 JS搞砸了页面的其他方面，所以css会有所帮助。

Answer 1

您是否考虑过使用CSS媒体查询？您可以根据屏幕尺寸居中/不居中。 AFAIK没有可靠的方法来确定它是一个“移动设备”，即使是JS，除了通过屏幕尺寸猜测。探测用户代理也不可靠。

一个非常简单的例子：

/* Center all the things! */
@media (min-width: 500px) {
  div {
    margin: 0 auto;
    text-aling: left;
  }
}

/* No fun allowed :( */
@media (max-width: 499px) {
  div {
    margin: 0;
    text-aling: left;
  }
}

一个重要的注意事项！旧浏览器不支持此功能 - 主要是IE8。 http://caniuse.com/#feat=css-mediaqueries

在手机上停止javascript功能

1 个答案: