十九、移动端网页的完美视口

gaoya7305

于 2023-07-17 10:59:16 发布

阅读量216

点赞数

文章标签：移动端完美视口

本文链接：https://blog.csdn.net/gaoya7305/article/details/131759607

版权

目录：
1.基础知识;
2.详解
3.结论

一、基础知识

  1. 移动端默认的视口大小是980px(css像素)。
      - 默认情况下，移动端的像素比就是 980/移动端宽度 （假设以iphone6为例：980/750）。
      - 如果直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，
          导致网页中的内容非常非常的小。
          
      - 编写移动页面时，必须要确保有一个比较合适的像素比（比如下面这几个比例是比较合适的）：
          1css像素  对应  2个物理像素
          1css像素  对应  3个物理像素

  2. 如何调整到1:2或1:3这几个比例呢？
      - 可以通过meta标签来设置视口大小

二、详解

1.先把head里面这句代码注释掉。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  
 
  <title>Document</title>
</head>

2.为了调整视口，我们自己去定义meta数据，控制视口。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- （meta设计一些元数据）
    name：你要设计的这个数据的名字  
    content:视口内容，可以在这里设置视口的宽高 -->

  <!-- 这句作用：设置视口大小为100px -->
 <meta name="viewport" content="width=100px">
 
  <title>Document</title>
</head>

3.测试完整代码样式

- 他就是正常撑满了屏幕的。因为现在视口是100，而我自己设置的box1也是100，所以就正好铺满。

- 注意这里的视口100px 是css像素， 而我手机750是物理像素。 所以比值：100 / 750 = 1:7.5  ,  推理，如果视口变成200px, 则比值： 200 / 750 = 1 : 3.25.   

- 每一款移动设备设计时，都会有一个最佳的像素比，
 	一般我们只需要将像素比设置为该值即可得到一个最佳效果

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=100px">
 <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 100px;
      height: 100px;
      background-color:red;
    }
  </style>

</head>

<body>

  <div class="box1"></div>
  
</body>

4.移动端最佳视口设置

iphone6 的最佳像素比是2.0： 1 css像素： 2 物理像素
通过这个最佳比值推导出最佳视口宽度： x:750 = 1: 2 — x = 375
以后找最佳视口值：直接看手机的宽度
将像素比设置为最佳像素比的视口大小，我们称其为完美视口（比如这里的视口宽度为375）。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <!--注释掉原来的这句
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
 
  <!--设置视口大小为375px -->
 <meta name="viewport" content="width=375px">
 <title>Document</title>
 
</head>

5.优化-自适应不同机型的完美视口

不同的手机，宽度不同，即完美视口大小是不同的。
解决：为了适配不同机型的手机的完美视口的不同，我们不能写死width,而是用width=device-width

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <!--注释掉原来的这句
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
 
  <!--设置视口大小  device-width是网页提供的变量，表示设备的宽度（完美视口） -->
 <meta name="viewport" content="width=device-width">
 <title>Document</title>
</head>

6.分析html自带设置好的meta视口

自带的meta 设置,width=device-width 等价 initial-scale=1.0，这里之所以都写，是因为防止有什么极端情况（比如横屏竖屏切换），前面的识别不了，就用后面的。

<!--自带的这行代码作用：就是设置完美视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

三、结论

以后再写移动端的页面，就要把自带的这个视口，要写上。

<!--自带的这行代码作用：就是设置完美视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

gaoya7305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十九、移动端网页的完美视口

自带的meta 设置,width=device-width 等价 initial-scale=1.0，这里之所以都写，是因为防止有什么极端情况（比如横屏竖屏切换），前面的识别不了，就用后面的。解决：为了适配不同机型的手机的完美视口的不同，我们不能写死width,而是用width=device-width。以后再写移动端的页面，就要把自带的这个视口，要写上。不同的手机，宽度不同，即完美视口大小是不同的。6.分析html自带设置好的meta视口。
复制链接

扫一扫