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