移动端适配方案

最新推荐文章于 2024-09-06 15:42:11 发布

魏晓栋c

最新推荐文章于 2024-09-06 15:42:11 发布

阅读量445

点赞数 1

文章标签： html html5 css3 javascript

本文链接：https://blog.csdn.net/weixiaodong1006/article/details/110952025

版权

本文探讨了移动端适配的四种方法：媒体查询、页面自动跳转结合媒体查询、JS计算以及视口缩放。媒体查询适用于简单网页，但可能导致代码量大和资源浪费；对于复杂网页，可能需要独立的移动端和PC端代码。自动跳转和JS计算提供了更灵活的解决方案，而视口缩放则有助于优化显示效果。

摘要由CSDN通过智能技术生成

一、媒体查询

通过媒体查询

1.媒体查询的方式是李南江老师早期采用的布局方式
2.它主要是通过查询设备的宽度来执行不同的 css代码，最终达到界面的配置

媒体查询优势

1.简单, 哪里不对改哪里
2.调整屏幕宽度的时候不用刷新页面即可响应式展示
3.特别适合对移动端和 PC 维护同一套代码的时候

媒体查询劣势

1.由于移动端和PC端维护同一套代码, 所以代码量比较大，维护不方便
2.为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
3.为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

应用场景

对于比较简单(界面不复杂)的网页, 诸如: 企业官网、宣传单页等我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式站点

对于比较复杂(界面复杂)的网页, 诸如: 电商、团购等更多的则是还是 PC 端一套代码, 移动端一套代码

二、页面自动跳转 + 媒体查询

 [1] 在PC端打开自动打开PC端界面
 [2] 在移动端打开自动打开移动端界面

自动跳转实现步骤

 1. 默认打开 PC 端界面
 2. 在PC端界面中通过 BOM 拿到当前浏览器信息
 3. 通过正则判断当前浏览器是否是移动端浏览器 
 4. 通过 BOM 的location 对象实现跳转到移动端界面

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>移动端常用适配方案-界面自动跳转</title>
	</head>
	<body>
		<script>
			/*
                PC:     Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
                移动端: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
                移动端: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/