移动端项目

最新推荐文章于 2024-06-07 15:21:44 发布

halo.顾北

最新推荐文章于 2024-06-07 15:21:44 发布

阅读量672

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/Sun__Fei/article/details/126284622

版权

本文介绍了移动端浏览器的现状，重点讲解了视口的概念，包括视觉视口、布局视口和理想视口，并探讨了如何通过meta标签设置理想视口。接着，文章详细阐述了移动端布局方案，如流式布局、rem布局、vw布局以及vw+rem布局的优缺点和实现方法。

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

1、移动端浏览器及内核

移动端浏览器：百度浏览器，火狐浏览器，谷歌浏览器，uc浏览器，360浏览器，qq浏览器，苹果浏览器，猎豹浏览器，搜狗浏览器，2345浏览器等等

国内用户首选使用移动浏览器的占比中：uc浏览器，qq浏览器，360浏览器，为用户手机浏览器平台首先前三位

内核：

对于安卓手机而言，使用率最高的就是webkit内核，国内目前尚无自主研发的内核，都是基于开源内核webkit上进行的二次开发，并不是完全的自主内核

对于苹果手机而言：由于系统封闭，不允许除苹果系统自带的浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均在Safari内核的基础上进行开发；

终端分为三个：pc iPad 移动端

现状

手机端的屏幕尺寸各不相同

视口大小不同

我们开发的网页，在不同的手机上，若想展示效果一致，必然不是为每一种型号手机都开发一套页面，而是一套代码要尽可能的能适配所有（部分极少数用户的机型在产品经理不纠结的时候也是可以舍弃的）的机型

2、viewport

1、什么是视口？

视口简单来说就是浏览器显示页面内容的区域。
视口：浏览器显示内容的屏幕区域，相当于PC端浏览器可视区 (白板区域)
在PC端，正常的视口宽度就是整个浏览器的窗口可视区的宽度，会随着浏览器窗口大小的重置而缩放；

2、视觉视口

视觉视口是指用户当前看到区域，即设备宽度

视觉视口是用户正在看到的网页的区域，即屏幕宽度。

3、布局视口

移动端设备默认的viewport，css布局写的大小，一般是980px（不写viewpoint代码演示）

移动设备的浏览器都默认设置了一个viewport元标签，定义了一个虚拟的布局视口，布局视口使视口与移动端浏览器屏幕宽度完全独立开。CSS 布局将会根据它来进行计算，并被它约束。

大部分移动设备默认的 viewport 为 980px,不同设备上的浏览器的默认的宽度并不一样。

所以PC上的网页基本能在手机上呈现，只不过看上去很小，一般默认允许用户通过手动缩放、平移来查看网页。

布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height来获取

如果要显式设置布局视口，可以使用 HTML 中的 meta 标签

<meta name="viewport">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    把这行标签去掉
    <!-- <meta name="viewport" content="width

最低0.47元/天解锁文章