我有一个主题组件，它为桌面和移动设备都定义了 CSS 和 Head。
在移动设备上，形状定义得更小以节省空间。
它在 iPhone 上的 Chrome 和 Firefox 上运行良好，但在 Safari 上，它会加载桌面版本。
Safari 浏览器没有加载网站的桌面版本。
有人遇到过这个问题吗？iOS 移动版 Safari 没有将自己报告为移动浏览器吗？还是……
谢谢
首先确认通过强制进入移动视图，在 URL 末尾添加：
https://example.com?mobile_view=1
问题可能并非如你所想……
你还应该说明你使用的是哪个版本的 Safari？
1 个赞
谢谢 @merefield
- 这是 Safari 17.1.2 上的 iOS 版本，加载组件时，它会显示为桌面定义的较大形状
刚刚将 iOS 更新到最新的 17.2.1，情况相同。 - 在同一设备上，如果使用 Chrome 或 Firefox 打开，它会显示为移动设备定义的较小形状
- 在桌面浏览器上，如果查看
https://example.com?mobile_view=1，它会显示为移动设备定义的较小形状。
我怀疑是我的 Safari 浏览器加载了桌面内容，但事实并非如此，比如它加载了移动布局，而不是桌面版本。
以前没有注意到这个问题，也许我大部分时间都在 iPhone 上使用 Chrome…
为了重现，我制作了这个简化的版本来展示这个问题。
- 下面的示例代码基本上在桌面浏览器中显示一个大的红圈，在移动浏览器中显示一个较小的红圈。
- 安装此组件后，您可以看到
它在 iPhone 的 Chrome/Firefox 上显示小圆圈，这是预期的
但在 Safari 上显示一个大圆圈，这是为桌面浏览器定义的。这是不符合预期的 - 创建一个主题组件，添加以下内容
桌面
CSS
.deng-box1 {
position: fixed;
top: -30px;
left: 180px;
z-index: 1999;
}
.deng-box1 .deng {
position: relative;
width: 120px; // 尺寸更大！！！
height: 90px; // 尺寸更大！！！
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
Head
<div class="deng-box1">
<div class="deng">
</div>
</div>
移动设备
CSS
.deng-box-mobile {
position: fixed;
top: 180px;
left: -40px;
z-index: 1999;
}
.deng-box-mobile .deng {
position: relative;
width: 60px; // 尺寸更小！！！！！！
height: 45px; // 尺寸更小！！！！！
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
Head
<div class="deng-box-mobile">
<div class="deng">
</div>
</div>
1 个赞
我建议将其打包在 GitHub 上，以便人们能够轻松地进行验证……
如果在 Safari 移动浏览器上添加此查询字符串会怎样？
用 ?mobile_view=1 这样，它会在 iPhone Safari 浏览器中加载移动版本
嗯……
将把它放到一个仓库中以便于尝试/调试……感谢你的帮助！
啊，之前不是吗？真有意思！
在 17.3 (PB) 版本下，我在 iPhone 11 上看到了我的 TC 的移动版本，而无需强制（使用该查询字符串）。