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

Question

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

首先，我开发网络并通过 Chrome 模拟移动模式。

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

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

谢谢

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');
    }
}