如何使网页自动适配手机端

2024-04-21 13:54| 来源: 网络整理| 查看: 265

网页自适应手机端的方式有两种：

1. PC端的设计与手机端相差不大，利用 @media媒体查询调整百分比

2. PC端与手机端的设计分离，利用判断设备的方式做301跳转

下面就结合源代码讲一讲如何实际实现这两种方案：

第一步：在html代码中添加如下代码

第二步：

方案一：设置PC端内容区域width:1100px，添加如下代码：

.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

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) { } } } }

PS:欢迎扫描下方二维码或点击链接，加入QQ群

一群用代码改变世界的

【本文地址】

公司简介

联系我们