在移动设备或台式计算机之间部署到 aws elastic beanstalk 的 django 网站是不是有区别？

Posted 2023-03-04

【中文标题】在移动设备或台式计算机之间部署到 aws elastic beanstalk 的 django 网站是不是有区别？

【英文标题】：Is there a difference in a django website deployed to aws elastic beanstalk between a mobile device or desktop computer?在移动设备或台式计算机之间部署到 aws elastic beanstalk 的 django 网站是否有区别？

【发布时间】：2019-06-19 17:12:27

【问题描述】：

我已将我的网络应用程序（现在只是一些带有 js 和 css 的模板）部署到 aws elastic beanstalk 并且网站已启动并运行。

我为网站布局使用了预定义的主题，其中包括响应式设计。

在桌面计算机上，即使我手动调整窗口大小，网站看起来也很好。在每个分辨率中看起来都很棒！每个图标和图像都能完美加载。

现在，如果我想在我的智能手机（移动设备）上查看该网站，它会开始“旋转”起来。它在起始页下方添加了一个白条，在不同的浏览器上它只是将一些 div 完全混合在一起，将它们呈现在页面顶部而不是底部。 有些图标也没有正确显示。

我为台式电脑尝试了不同的浏览器，一切都很好。在智能手机上，我在所有浏览器上都有问题。

我在http://www.mobilephoneemulator.com/上查看了网站（www.meyn-computer-lotse.de），网站也完美显示。

我就是找不到我的错误...

现在我有两个问题： 1.在移动设备上是否有一种简单的方法来查找网站的css规则，因为在台式电脑上我可以轻松查找应用的规则。 2. 我必须在 django 或 aws elastic-beanstalk 中为移动设备指定一些东西吗？

感谢每一个帮助。

【问题讨论】：

根据您的问题，我认为标签应该不同。你问的是检查 CSS 的移动

【参考方案1】：

您可以在浏览器中按 F12，而不是尝试查找使用手机时应用的 CSS 规则。如果您使用 Chrome 浏览器，您可以切换设备工具栏并在您想要查看网站的不同设备之间进行选择。

要回答您的第二个问题，为了确保页面响应，您可以使用 Bootstrap "https://getbootstrap.com" 之类的内容。 Bootstrap 负责 javascript 和 CSS 以确保所有内容都正确显示，但有时您可能不得不选择不同的布局，因为 bootstrap 有一些限制。

您可以区分桌面用户或手机用户，为他们提供针对他们使用的设备进行了优化的不同模板。这里有几个不同的选择：

使用django-mobile，

django-mobile 提供了一种简单的方法来检测移动浏览器和 为您提供工具来呈现一些不同的模板 向用户提供您网站的移动版本。

使用MobileESP，

MobileESP 有一个用于检测移动设备的简单 API。 API 如果设备是 TRUE，则返回简单的布尔结果 指定类型，如果不是，则为 FALSE。例如，想知道是否 您的访问者使用的是 iPhone、android 或 Windows Phone 设备？简单地 使用 DetectTierIphone() 方法。

希望这些信息对您有用。

【讨论】：

您好，首先非常感谢您！我通过 F12 按钮在 Google Chrome 中查看了该网站，它在 iPhone X 或 Galaxy S5 上总是看起来不错。但话又说回来，它在我真正的移动设备上看起来不太好/不一样……这就是我没有得到的。就像我说的我买了网站主题，它应该是响应式的，而且我有不同的 CSS 用于不同的宽度等等。我真的不想自己经历这一切，这就是我使用预编程主题的原因。