移动端主流 viewport 视口

2024-08-23

浅谈移动端中的视口（viewport）

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. 而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport).视觉视口(Visual Viewport)和理想视口(Ideal Viewport). 本文主要讨论移动端中的视口. 1. 基本概念 1.1 两种像素像素是计算机屏幕中显示特定颜色的最小区域.屏幕中的像素越多,同一

前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询

前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <met

移动端布局：视口viewport的理解

移动端开发中,有一些基本概念需要理解清楚,才能更好的组织编程逻辑.在刚接触时,移动端视口的缩放和rem单位的缩放搞混淆了,弄得自己很蒙圈.所以仔细总结下自己的理解. 移动端的适配,我理解为两点: 第一点就是视口的缩放配置,牵扯出视口和像素等概念.目的是为让我们的CSS样式中逻辑像素匹配到手机终端的物理像素,让网页视图适合手机屏幕.虽然在代码中只是一个语句就解决的问题,但要理解它,要弄懂很多概念.<关于像素Pixel历史的详解看下一篇文档> 第二点就是rem单位的使用,目的是为了我们只需要一份代

移动端web开发——视口

本篇主要是记录一下移动端视口的分类说明和其它的一些知识.在开始之前,先看一个典型的例子: <meta name="viewport" content="width=device-width,initial-scale=1"> @media screen and (max-width:480px){ //宽度不超过480px是的样式 } 上述代码相信大家在做移动端开发时经常去书写.它研究了两个内容:meta视口和宽度媒体查询.通常我们都会称上述代码为CSS

移动前端中viewport(视口) 转

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系. (1) layout viewport(布局视口) 一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.iOS, Android基本都将这个视口分辨率设置为 980px,所以pc上的网

移动端开发-viewport

1.viewport viewport 即设备屏幕上显示网页的区域.因为移动设备屏幕比较小,为了能让移动设备能够显示更多内容,默认设置的viewport 并不是屏幕真是像素点的宽度,一般为980px 宽或者是其他值(不同的设备可能不一样),但带来的后果就是当网页过宽浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小. 2.像素和物理像素说到像素和物理像素,就得说一下DPR(devicePixelRatio) 这个词了,DPR表示屏幕 “显示像素” 与 “

浅谈移动端三大viewport

我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 可能我们只知道这三个字段的含义(视口宽度等于设备宽度,屏幕缩放为1,禁止用户缩放),但是为什么要这么写,其原理又是什么呢? 我们先看一个简单的demo吧. <!doctype html> <html la

移动端开发-viewport与媒体查询

首先要知道,在移动开发中,手机的浏览器会默认网页是为宽屏而设计的,它会缩小整个页面来适应屏幕. 1. 不使用viewport出现的问题提到响应式设计,大家首先想到的可能是 Bootstrap , @media . @media(媒体查询)是CSS3的属性,利用它可以在不依赖其他库的情况下实现响应式设计.示例代码如下: @media screen and (min-width: 960px) { body { background-color: blue; } } @media screen a

html5移动端主流适配方案

1.流式布局(百分比布局) 案例:京东移动端优点:简单方便,只需要固定高度,宽度自适应: 缺点:大屏幕手机实际显示的不协调. 2.响应式布局优点:可以节约成本,不用再做专门的web app网站(外包公司.小公司.博客): 缺点:工作量大.维护很难:国内大型企业在移动端很少用. 3.固定宽度案例:荔枝FM 640px 优点:与设备做等比例的缩放: 缺点:在大屏幕手机下两边留白,操作按钮小. 4.目前主流做法rem 案例:淘宝移动端 rem:font size of r

移动端开发viewport深入理解（转）

一.viewport的概念移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小. 在默认情况下,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewp

PyQt(Python+Qt)学习随笔：QAbstractScrollArea的viewPort(视口）理解

老猿Python博文目录老猿Python博客地址在学习Designer中ItemViews类部件时,这些部件都有个父类QAbstractScrollArea,该父类是Qt滚动区域的低级抽象.该区域提供一个称为viewport的中心小部件,在该小部件中滚动区域的内容可以被滚动展现对应内容,即要展现内容的可见部分在viewport中呈现. 老猿以前没有研究过绘图相关的内容,对viewport感到很困惑,经查阅资料,老猿理解: 1.QAbstractScrollArea本身都带有viewPort,

移动端页面模板viewport

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> --------------

移动端meta viewport

Web端主流框架，jquery、angular、react、vue

不得不说,前端技术发展非常迅速,时不多久就有一个新的东西冒出来,并且迅速膨胀发展,让旁观者眼花缭乱,让开发者目眩神迷,但总体上来说,这波互联网大浪潮带动了前端技术的大发展,给曾经那些苦苦挣扎于DOM操作的页面工作者带来福音,也为前端技术的开发提出更高的要求. 我始终认为从 jquery 转到 angular 或 vue 是很困难的,这种困难体现在我们要从DOM驱动操作转换到数据驱动操作,从某个角度来说,DOM驱动是指,我们要在一段初始化的html代码上,简单暴力地加加减减,使显示的效果与我们的预

移动端与PC端的viewport

第一种解析: 设备像素,就是我们直觉上觉得"靠谱"的像素,这些像素为所使用的各种设备提供了正规的分辨率,并且其值可以通过(通常情况下)从screen.width/height属性中读出: css像素,就是css自定义的像素,需要注意的是css像素与设备像素不是一回事: 第二种解析: CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. PPI(DPI)的计算公式: 1 css

flex布局响应式布局

移动端页面开发流程移动端页面布局一.移动端app分类 1.Native App原生app手机应用程序使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是object-C 2.Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用 3.Web App 基于Web的app手机应用程序完全使用html5页面加前端js框架开发的手机应用二.Viewport视口视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域

移动端布局最佳实践（viewport+rem）

通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图但是这个可能不会太精准,比如我的设备布局viewport可能是370px,这样只能使用320这一版本.而事实上,他们的viewport并不相同,所以他们的布局也得不一样.也就是说我们如果用css媒体查询只能说是可以用,但不是最佳实践.其实通过看某些牛逼的移动端网站,可以看到他们的共同点,他们都是使用

前端笔记之移动端&响应式（中）视口&百分比布局&弹性盒模型&rem&fillpage

一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕分辨率:指在横纵向上的像素点数,单位是px,1px=1个像素点.一般以纵向像素*横向像素来表示一个手机的分辨率,如1920*1080.(这里的1像素指的是物理设备的1个像素点) 屏幕像素密度:屏幕上每英寸可以显示的像素点的数量,单位是ppi.屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,

移动端适配（1）——viewport设置与初始化css

响应式注意要添加“视口”约束标记---viewport

视口:我们试图在iPhone中输出屏幕宽度,你会发现屏幕宽度是980,却和PC屏幕差不多大.原因是苹果主导的这些手机厂商,为了使用户获得完整web体验,很多设备都会欺骗浏览器返回一个数值较大的“视口” ,告诉浏览器,我是想以980px宽度来显示这个页面,iPhone的分辨率为1136*640,三星Note3的分辨率1920*1080,但是分辨率和视口没有系.视口对于我们实现响应式是很不方便的,980太大了,不符合我们心中的期待.我们心中认为手机屏幕尺寸应该在300-400之间. 所以要添加约束

移动端 主流 viewport 视口

热门专题

移动端主流 viewport 视口