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