视口的大小

已于 2023-02-25 21:32:24 修改
阅读量62 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue八套（5）移动端开发 文章标签： vue.js
于 2019-05-26 21:43:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43706224/article/details/90581203
博客主要围绕PC端和移动端视口开发展开。介绍了PC端视口特点及解决办法，指出移动端开发模拟器调试可能不准确，需真机调试，还提及移动端viewport设置、视口控制，以及避免滚动要注意不设置固定宽高，最后进行了总结。

1.pc端的视口特点及解决办法在这里插入图片描述2.移动端开发有时候模拟器调试不准确，需要用真机调试在这里插入图片描述3.在这里插入图片描述4.移动端viewport的设置在这里插入图片描述5.移动端视口控制在这里插入图片描述6.避免滚动：不要设置固定宽高
7.总结在这里插入图片描述

html视口配置,web容器如何自适应视口大小
weixin_34442022的博客
06-10 1004
前言在前端生涯上，经常会遇到需要容器自适应视口高度这种情况，本文将介绍我能想到的解决这个问题的方案。基础知识html元素的高度默认是auto(被内容自动撑开)，宽度默认是100%(等于浏览器可视区域宽度)，没有margin和padding；body元素的高度默认是auto，宽度默认是100%，有margin而没有padding；若想让一个块元素(如div)的高度与屏幕高度自适应，始终充满屏幕，需要...
web容器如何自适应视口大小
12-10
在前端生涯上，经常会遇到需要容器自适应视口高度这种情况，本文将介绍我能想到的解决这个问题的方案。 基础知识 html元素的高度默认是auto（被内容自动撑开），宽度默认是100%（等于浏览器可视区域宽度），没有...
前端怎么获取视口大小
Lipn_的博客
11-15 686
这两个属性返回文档的可见部分（视口）的宽度和高度，不包括滚动条占用的空间、窗口边框和菜单栏等。（在某些情况下，这两个属性可能更适合获取视口大小。这两个属性分别返回浏览器窗口的视口宽度和高度（单位为像素），包括滚动条占用的空间（如果有的话）。
UE5 自定义主视口大小位置，调整视口中心点
qq_46865566的博客
11-01 1357
本功能适用于边上有UI遮挡还想要剩余窗口能够完整显示本功能参考。
web开发学习总结之移动端浏览器视口大小
老王的博客
12-08 1298
1 PPI 首先明确一点，PPI数值的大小与屏幕（电脑或手机）分辨率大小、屏幕（电脑或手机）视口大小没有任何关系。 PPI全称是Pixal Per Inch 每平方英寸像素的个数。 手机的PPI很大，所以屏幕小但是像素多，所以颗粒感小(视网膜屏)，让人看不到屏幕上的像素点。 2 浏览器视口大小 2.1 电脑的浏览器视口宽度 win10系统有点准备工作。就是现在设置->显示页面，把“更改文本、...
获取浏览器视口大小
weixin_30216561的博客
11-13 118
1 window.onload = function() { 2 alert("width: " + getPageScale().pageWidth + ", height: " + getPageScale().pageHeight); 3 }; 4 5 /** 6 * 获取浏览器视口大小 7 * @return {object} 宽，高 8 ...
使用jQuery获取视口大小
p15097962069的博客
07-05 1197
How do I use jQuery to determine the size of the browser viewport, and to redetect this if the page
视口大小的版式
cunque0995的博客
06-27 254
CSS中有一些值，用于根据视口（浏览器窗口的大小）调整大小。 它们被称为视口单位 ，其中有许多功能稍有不同（都是有用的）。 一单位是视口轴之一的1％。 这些对于响应式设计很有用，也就是说，利用可利用的空间来设计在不同屏幕尺寸下看起来都不错的网站。 视口单位可以做很多事情，但让我们特别看一看： 印刷术 。 值得一看的是我们最近发布的《 简化的流体印刷术》，以实用，基于视口的固定类型调整大...
确定页面视口大小
03-05 212
视图窗口大小
js监听视口大小变化，动态调整vh高度
Abao的博客
08-17 311
js动态改变vh高度
检查浏览器视口大小
css_styles的博客
04-26 1332
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>浏览器视口大小检查</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/> </head> <
viewportSize-safari-extension:Safari扩展程序，用于在调整浏览器大小时显示视口大小。 当您进行响应式设计并使用Web Inspector调整视口大小时，它非常理想（就像我一样）。 仍然没有像Firefox的响应模式那样的功能，但是您该怎么办？
04-30
视口大小 Safari扩展程序，用于在调整浏览器大小时显示视口大小。 通过在设置中启用此选项，可以在启用Web Inspector并将其嵌入到浏览器窗口中时（在右侧或底部）仅显示尺寸。 当您进行响应式设计并使用Web ...
bootstrap3-viewport-size:检查 Bootstrap 3 视口大小的 JavaScript 助手
06-02
Bootstrap 3 视口大小 这是 Bootstrap 3 的一个非常简单的助手，用于获取 JavaScript 代码中的当前视口大小（“xs”、“sm”、“md”或“lg”）。 用法 您可以简单地包含它： [removed][removed] 并且您将在全局 ...
parallax-viewport-bootstrap-navbar:引导程序绑定粘性导航和视口大小
07-08
引导程序绑定粘性导航和视口大小 只需克隆 repo 并在浏览器中运行 index.html。 我“封装”了代码以使其简单易懂。 如果您想进行改进，那将是非常受欢迎的。 谢谢你然后： 注意：这个 Repo 包含一个带有 ...
use-viewport-sizes:微小的React钩子，可让您跟踪组件中可见窗口的视口大小，并带有可选的防反跳功能，以进行更新以实现最佳渲染
05-04
使用视口大小 一个微小的React挂钩，可让您跟踪组件中的可见窗口视口大小，并带有可选的反跳和其他灵活选项，以实现最佳使用效果。 安装 npm install -D use-viewport-sizes 好处 非常轻巧且零依赖-在gzip之后添加...
Vue基础知识-脚手架开发-子传父-props回调函数实现和自定义事件（$on绑定、$emit触发、$off解绑）实现
2503_91308956的博客
09-04 1171
本文演示了Vue2中两种子组件向父组件传递数据的方法：1）通过props回调函数，父组件传递回调函数给子组件，子组件调用该函数传参；2）通过自定义事件，父组件给子组件绑定事件，子组件用$emit触发并传参。
element plus 多个form校验
最新发布
qq_40121308的博客
09-08 43
element plus 循环form校验
vue如何配置 vite
魏晋-
09-08 193
在 Vue 项目中配置 Vite 是一个常见的开发场景，Vite 作为新一代构建工具，能显著提升 Vue 项目的开发体验。
vue中 TS配置，vite配置，eslint配置的技术沉淀
魏晋-
09-08 197
在现代 Vue 项目开发中，TypeScript、Vite 和 ESLint 已成为提升开发效率与代码质量的三大利器。本文将系统总结这三者的配置实践，包括基础设置、协同工作方式及最佳实践，帮助团队构建规范、高效的开发环境。
vmware 调整视口大小
08-12
要调整 VMware 虚拟机的视口大小，可以按照以下步骤进行操作： 1. 在 VMware 虚拟机运行时，点击窗口上方的 "View"（视图）选项。 2. 在下拉菜单中，选择 "Fit Guest Now"（自适应客户机）或者 "Stretch Guest"（拉伸客户机）。 - "Fit Guest Now" 会根据虚拟机的分辨率调整窗口大小，使其适应当前屏幕。 - "Stretch Guest" 则会拉伸虚拟机的分辨率以适应窗口大小。 3. 根据需要选择适当的选项，虚拟机的视口大小会相应地调整。 这样，你就可以调整 VMware 虚拟机的视口大小了。希望对你有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值