技术求教，各位大佬赐教

[lufeng666]

需求：
我有一个 H5 网页，移动端 WEB 访问并使用效果良好。但是没有做成响应式布局，PC WEB 不适配。因为移动端 WEB 是竖屏的，PC WEB 是横屏的，想要改造做成自适应布局工作量有些大，如果专门为 PC WEB 做一套页面和交互，开发成本维护成本也挺高。

想法： 自己所能想到的比较好的方案就是 PC 端写个 iframe ，iframe 搞成竖屏的用来加载移动端 WEB 页面，从而解决 PC WEB 不适配的问题。

请各位大佬赐教：
有没有更低成本、效果更好的实现方式？比如某个开源框架能实现，或者某个工具能实现这样的效果？

为此我画了个想要实现的效果图。

点击查看想要实现的效果

[lufeng666]

[hhacker]

iframe 是成本最低的方案

[tianhehechu]

把你项目背景和技术栈简短描述，然后把页面逐条消息贴给 ChatGPT ，让它帮你出转换成适应 PC 横屏的版本，然后你自己写个 JS 在实际访问页面时判断当前终端类型来选择跳转不同的页面即可。

[murmur]

响应式适配很难的 竖屏转横屏相当于进平板模式了 那宽度

比较简单的办法是页面放大大概 25%左右，然后两边留白居中，不适配

[lyxxxh2]

1. 直接竖屏风格:(推荐)
body{
width:50%;
margin:atuo;
}


2. 响应式:
正常框架都支持啊。
col-md-6
col-sm-6
...
但是已经开发好手机端,再改很麻烦。

[gloye]

@media-query body{width:xx;margin:0 auto;}

[kxg3030]

如果你要实现这种：
{
"data": {
"error": "Imgur is temporarily over capacity. Please try again later."
},
"success": false,
"status": 403
}
还真没什么办法，毕竟这是 json 啊

[zhhbstudio]

<style>
body{
max-width: 768px;
margin: 0 auto;
}
</style>

[NongNong]

是不是可以判断，是否为桌面端，是桌面端的话给 body 一个 max-width,margin: 0 auto ？

[sentinelK]

iframe 确实成本最低（移动 web 不需要任何侵入性），但代价就是也是最丑陋的修改方式。（会导致 pc 端 url 和移动端不一致。）

所以最经济的方案应该是楼上几位提到的，如果是 pc 端（或者某个横向比例、分辨率阈值），就强制限制 body （或最外层 div ）宽度，并居中留白。

btw：pc 横屏 <-> 移动竖屏这种跨度，我个人不建议考虑自适应。因为他并不光是页面元素布局的问题。更多是操作习惯、信息密度等设计维度的问题。

[pcdoggy]

如果移动端访问效果良好，可以先确认下效果最好的最宽场景，再添加宽屏的分辨率的适配（但是移动端的操作习惯跟 pc 还是差异很大的）

[Sunzehui]

套 iframe 吧，不然限制 body 的方式，你的 fixed 定位的东西都得改

[Sunzehui]

@Sunzehui #12 ```javascript
document.querySelector('#app').remove()
const iframe = document.createElement('iframe')
iframe.src = location.href
document.body.appendChild(iframe)
```

[NongNong]

@Sunzehui 可以用 transform 限制 fixed 在 body 内