需求:
我有一个 H5 网页,移动端 WEB 访问并使用效果良好。但是没有做成响应式布局,PC WEB 不适配。因为移动端 WEB 是竖屏的,PC WEB 是横屏的,想要改造做成自适应布局工作量有些大,如果专门为 PC WEB 做一套页面和交互,开发成本维护成本也挺高。
想法: 自己所能想到的比较好的方案就是 PC 端写个 iframe ,iframe 搞成竖屏的用来加载移动端 WEB 页面,从而解决 PC WEB 不适配的问题。
请各位大佬赐教:
有没有更低成本、效果更好的实现方式?比如某个开源框架能实现,或者某个工具能实现这样的效果?
为此我画了个想要实现的效果图。
![]() |
1
lufeng666 OP |
2
hhacker 44 天前
iframe 是成本最低的方案
|
![]() |
3
tianhehechu 43 天前
把你项目背景和技术栈简短描述,然后把页面逐条消息贴给 ChatGPT ,让它帮你出转换成适应 PC 横屏的版本,然后你自己写个 JS 在实际访问页面时判断当前终端类型来选择跳转不同的页面即可。
|
![]() |
4
murmur 43 天前 ![]() 响应式适配很难的 竖屏转横屏相当于进平板模式了 那宽度
比较简单的办法是页面放大大概 25%左右,然后两边留白居中,不适配 |
![]() |
5
lyxxxh2 43 天前
1. 直接竖屏风格:(推荐)
body{ width:50%; margin:atuo; } 2. 响应式: 正常框架都支持啊。 col-md-6 col-sm-6 ... 但是已经开发好手机端,再改很麻烦。 |
6
gloye 43 天前
@media-query body{width:xx;margin:0 auto;}
|
![]() |
7
raviscioniemeche 43 天前
如果你要实现这种:
{ "data": { "error": "Imgur is temporarily over capacity. Please try again later." }, "success": false, "status": 403 } 还真没什么办法,毕竟这是 json 啊 |
8
zhhbstudio 43 天前
<style>
body{ max-width: 768px; margin: 0 auto; } </style> |
![]() |
9
NongNong 43 天前
|
![]() |
10
sentinelK 43 天前
iframe 确实成本最低(移动 web 不需要任何侵入性),但代价就是也是最丑陋的修改方式。(会导致 pc 端 url 和移动端不一致。)
所以最经济的方案应该是楼上几位提到的,如果是 pc 端(或者某个横向比例、分辨率阈值),就强制限制 body (或最外层 div )宽度,并居中留白。 btw:pc 横屏 <-> 移动竖屏这种跨度,我个人不建议考虑自适应。因为他并不光是页面元素布局的问题。更多是操作习惯、信息密度等设计维度的问题。 |
11
pcdoggy 43 天前
如果移动端访问效果良好,可以先确认下效果最好的最宽场景,再添加宽屏的分辨率的适配(但是移动端的操作习惯跟 pc 还是差异很大的)
|
12
Sunzehui 43 天前
套 iframe 吧,不然限制 body 的方式,你的 fixed 定位的东西都得改
|