ExtJS 网页显示在 Chrome 切换设备模式和移动浏览器中不同

Question

您好，我正在尝试构建一个可以通过移动浏览器使用的 Web 应用程序。

首先，我通过Chrome.

开发web并模拟移动模式

但是，我用手机连接网站，显示和Chrome不一样。

我不知道如何解决这个问题。谁能给我建议或 google 的任何关键词？

谢谢

Answer 1

我找到了解决方案。

在ext-all.js中有一个函数initMeta设置meta.

initMeta: function() {
                var me = this,
                    maxScale = me.maxUserScale || 1;

                me.addMeta('viewport', 'width=device-width, initial-scale=1, maximum-scale=' +
                       maxScale + ', user-scalable=' + (maxScale !== 1 ? 'yes' : 'no'));
                me.addMeta('apple-mobile-web-app-capable', 'yes');
            },

我们可以修改initial-scale值使其小于1。

希望这个技巧对其他人有所帮助。

更新

我认为这是避免修改 ext-all.js.

的更好方法

当app.js执行启动函数时，我添加这些代码：

launch: function() {
    if (Ext.supports.Touch) {
        var head = Ext.getHead(),
            viewportMeta = head.dom.getElementsByTagName('meta')[0];

        viewportMeta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=1, user-scalable=yes');
    }
}

ExtJS 网页显示在 Chrome 切换设备模式和移动浏览器中不同

ExtJS web display are different in Chrome toggle device mode and mobile browser

javascript

css

browser

extjs

extjs5