如何使网页自动适配手机端
网页自适应手机端的方式有两种:
1. PC端的设计与手机端相差不大,利用 @media媒体查询 调整百分比
2. PC端与手机端的设计分离,利用判断设备的方式做301跳转
下面就结合源代码讲一讲如何实际实现这两种方案:
第一步:在html代码中添加如下代码
1 2 3 4 5 6 | < meta charset="utf-8" /> < meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"> < meta content="yes" name="apple-mobile-web-app-capable"> < meta content="yes" name="apple-touch-fullscreen"> < meta content="black" name="apple-mobile-web-app-status-bar-style"> < meta content="320" name="MobileOptimized"> |
第二步:
方案一:设置PC端内容区域width:1100px,添加如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 | .container{ width : 1100px ; max-width : 100% ; } .container img{ max-width : 100% ; } @media only screen and ( max-width : 480px ) { //此适配不同手机型号下文字,图片的大小 } @media only screen and ( max-width : 375px ) { //此适配不同手机型号下文字,图片的大小 } ..//可继续 |
方案二:在PC端公共Header中,添加如下JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type= "text/javascript" > if (window.location.toString().indexOf( 'pref=padindex' ) != -1) { } else { if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) { if (window.location.href.indexOf( "?mobile" ) < 0) { try { if (/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = "手机端链接" ; } else if (/iPad/i.test(navigator.userAgent)) { } else { } } catch (e) { } } } } </script> |
PS:欢迎扫描下方二维码或点击链接,加入QQ群
标签:
适配手机端
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)