不同的桌面和移动视图 - 什么方法是最好的？答案

【问题标题】：Different desktop and mobile view - what approach is the best?不同的桌面和移动视图 - 什么方法是最好的？
【发布时间】：2020-10-22 03:11:34
【问题描述】：

我有一个 WWW 网站项目，其中移动版本与移动应用程序相同，但“桌面”版本完全不同。不同的导航，不同的卡片，不同的视图划分方式..

在 PHP/Laravel 和 HTML/CSS/JS 中执行此操作的最佳方法是什么？我问的是一般方法。

提前谢谢你。

【问题讨论】：

如果你必须使用 CSS 以外的东西，你可以利用这个包 github.com/jenssegers/agent 并在你的控制器中为不同的场景提供不同的 view() 布局。

标签： javascript css laravel mobile frontend

【解决方案1】：

这应该通过 css 使用媒体查询来完成，通过这样做，您可以根据设备大小控制卡片大小和视图。您可以找到更多信息https://www.w3schools.com/css/css_rwd_mediaqueries.asp

【讨论】：

【解决方案2】：

我使用的“技巧”是使用不同的 css 样式表。

您可以为您的 css 样式设置最小值和最大值，例如：

@media (max-width: 600px) {
//put css here for very small screens
}
@media (min-width: 601px) and (max-width: 1024px) {
//put css here for medium sized screens
}
@media (min-width: 1025px) {
//put css here for large screens
}

请注意，这仅适用于您的 html 在所有屏幕上保持相同并且布局仅由不同的 css 定义的情况。但在某些情况下，这是一种可能的方法。

【讨论】：

【解决方案3】：

但差异很大，我认为仅使用 CSS 是不够的。更改元素的大小和网格中的位置是显而易见的，并且存在于所有项目中。这是某种边缘情况。

例如，在桌面上，我在一个视图中有两个部分的用户配置文件，但在移动设备上，我有两个专用的子页面。

在桌面上，我在导航栏中有普通菜单，但在移动设备上，每个视图都有顶部和底部的上下文按钮。

在桌面中，有些东西是模态的，但在移动中，在单独的子页面中或作为出现的文本标签（简单状态）。

...等等

【讨论】：