移动端适配——视口概念

简介: 事实上这种方式是不利于我们进行移动的开发的,我们希望的是设置100px,那么显示的就是100px;

image.png


1 认识视口


  • 在前面我们已经简单了解过视口的概念了:
  • 在一个浏览器中,我们可以看到的区域就是视口(viewport);
  • 我们说过fixed就是相对于视口来进行定位的;
  • 在PC端的页面中,我们是不需要对视口进行区分,因为我们的布局视口和视觉视口是同一个;
  • 但是在移动端,不太一样,你布局的视口和你可见的视口是不太一样的。
  • 这是因为移动端的网页窗口往往比较小,我们可能会希望一个大的网页在移动端可以完整的显示;
  • 所以在默认情况下,移动端的布局视口是大于视觉视口的;
  • 所以在移动端,我们可以将视口划分为三种情况:
  • 布局视口(layout viewport)
  • 视觉视口(visual layout)
  • 理想视口(ideal layout)


2 布局视口和视觉视口


  • 布局视口(layout viewport)
  • 默认情况下,一个在PC端的网页在移动端会如何显示呢?
  • 第一,它会按照宽度为980px来布局一个页面的盒子和内容;
  • 第二,为了显示可以完整的显示在页面中,对整个页面进行缩小;
  • 我们相对于980px布局的这个视口,称之为布局视口(layoutviewport);
  • 布局视口的默认宽度是980px;
  • 视觉视口(visual viewport)
  • 如果默认情况下,我们按照980px显示内容,那么右侧有一部分区域就会无法显示,所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中;
  • 那么显示在可见区域的这个视口,就是视觉视口(visual viewport)
  • 在Chrome上按shift+鼠标左键可以进行缩放。


3 理想视口


  • 如果所有的网页都按照980px在移动端布局,那么最终页面都会被缩放显示。
  • 事实上这种方式是不利于我们进行移动的开发的,我们希望的是设置100px,那么显示的就是100px;
  • 如何做到这一点呢?通过设置理想视口(ideal viewport);
  • 理想视口(ideal viewport):
  • 默认情况下的layout viewport并不适合我们进行布局;
  • 我们可以对layout viewport进行宽度和缩放的设置,以满足正常在一个移动端窗口的布局;
  • 这个时候可以设置meta中的viewport;


image.png


  • 我们常常像下面这样:


image.png

目录
打赏
0
0
0
0
1
分享
相关文章
|
8月前
移动端的布局如何使用媒体查询
移动端的布局如何使用媒体查询
115 2
前端:移动端视口配置
移动端视口配置是指针对移动设备浏览器设置视口的宽度、高度和缩放等属性,以确保网页能根据不同的屏幕尺寸和分辨率进行适配,提供更好的用户体验。合理的视口配置是移动优先设计的关键环节。
移动端适配布局指南:打造完美用户体验的秘密武器
【8月更文挑战第26天】在Web前端开发中,选择合适的移动端适配方案对确保跨设备的良好显示与用户体验至关重要。常用方案包括:媒体查询实现响应式布局;百分比、flexbox与CSS Grid布局提供更灵活的设计;结合viewport元标签和rem单位实现等比缩放;利用第三方库如Bootstrap加速开发。实践中应综合运用这些技术,并通过广泛测试保证兼容性和效果。
130 4
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
Web前端开发中的移动端适配与响应式设计
【2月更文挑战第11天】 对于现代 Web 前端开发而言,移动端适配与响应式设计是至关重要的技术环节。移动设备的普及使得用户更多地通过手机或平板设备访问网站,因此,如何有效地适配各种屏幕尺寸并提供良好的用户体验成为了前端开发者需要面对的重要问题。本文将介绍移动端适配与响应式设计的基本原理,并结合实际案例探讨其在前端开发中的应用。
【前端】移动端适配方案-rem
【前端】移动端适配方案-rem
163 0
【前端】【响应式设计】【移动端】响应式设计作业01:视口、二倍图
【前端】【响应式设计】【移动端】响应式设计作业01:视口、二倍图
323 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等