当前位置： 首页 > news >正文

青少年编程与数学 02-005 移动Web编程基础 02课题、视口与像素

news 来源：原创 2025/5/18 12:43:39

青少年编程与数学 02-005 移动Web编程基础 02课题、视口与像素

  • 一、视口
  • 二、布局视口（Layout Viewport）
  • 三、视觉视口（Visual Viewport）
  • 四、理想视口（Ideal Viewport）
  • 五、视口设置
      • 关键属性
      • 示例代码
        • 示例1：基本设置
        • 示例2：禁止缩放
        • 示例3：限制最小宽度
  • 六、像素
      • 物理像素
      • 物理像素比（Device Pixel Ratio, DPR）
  • 七、二倍图
      • 为什么需要二倍图
      • 如何使用二倍图
  • 八、移动端开发选择
  • 九、常见问题处理
      • 1. 浏览器兼容问题
      • 2. CSS初始化
        • Normalize.css的优点：
      • 3. CSS3盒模型（box-sizing）
      • 4. 特殊样式处理
  • 十、技术选型
    • 1. 单独制作移动端页面技术类型
        • 流式布局（百分比布局）
        • Flex弹性布局
        • LESS + REM + 媒体查询布局
    • 2. 响应式页面技术选型
        • 媒体查询
        • Bootstrap框架
    • 3. 综合应用

课题摘要:本文详细介绍了视口（Viewport）的概念及其在响应式网页设计中的重要性，包括布局视口和视觉视口的区别。文章解释了理想视口的设置方法，并通过示例代码展示了如何在HTML中设置视口。同时，讨论了物理像素和物理像素比（DPR）对屏幕显示的影响，以及二倍图在高DPR屏幕上的应用。最后，文章探讨了移动端页面开发方案的选择，包括响应式设计和移动端专用页面的优劣，以及常见的移动端开发问题和解决方案。

一、视口

视口（Viewport）是用户在浏览器中实际可见网页区域的部分，它代表了浏览器窗口中显示网页内容的区域。在不同的设备上，视口的大小会有所不同。例如，在桌面电脑上，视口通常更大，而在移动设备如智能手机上，视口则相对较小。

视口的概念在响应式网页设计中尤为重要，因为它允许网页内容根据设备屏幕的大小和分辨率进行适配。在移动设备上，浏览器通常会使用一个虚拟的视口，将网页内容适配到合适的大小，以便用户能够更方便地浏览。这个虚拟视口的大小可以通过设置HTML中的<meta>标签来调整，通过设置viewport属性，可以让网页内容根据设备的屏幕大小和分辨率进行自适应。

在Web浏览器术语中，视口通常与浏览器窗口相同，但不包括浏览器的UI、菜单栏等，即指你正在浏览的文档的那一部分。视口的大小取决于屏幕的大小，无论浏览器是否处于全屏模式，是否被用户缩放了。在尺寸较大的设备中，视口可能是浏览器窗口的大小；而在大多数移动设备中，浏览器是全屏的，视口就是整个屏幕的大小。

视口的大小是可变的，它并不总是等于窗口的宽度。例如，在Chrome或Firefox浏览器中，document.documentElement.clientWidth和window.innerWidth可以表示视口的宽度。此外，视口还分为视觉视口（visual viewport）和布局视口（layout viewport）。视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。布局视口则是CSS布局将会根据它来进行计算，并被它约束的区域。

总的来说，视口是当前文档的可见部分，它在网页设计和开发中扮演着重要的角色，特别是在响应式设计和移动设备适配方面。

在移动设备上，视口的作用非常关键，主要体现在以下几个方面：

  1. 适配不同屏幕尺寸：移动设备有多种屏幕尺寸和分辨率，视口允许网页内容自适应不同设备的屏幕，确保内容在不同设备上都能以合适的尺寸显示。

  2. 响应式设计：通过设置视口的宽度和缩放比例，开发者可以实现响应式设计，让网页能够根据设备的视口大小动态调整布局和样式。

  3. 控制缩放：通过设置视口的初始缩放比例，可以控制用户访问网页时的初始显示效果，避免用户手动缩放，提供更好的用户体验。

  4. 优化性能：在移动设备上，合理的视口设置可以减少页面重绘和重排，提高页面加载速度和性能。

  5. 提高可访问性：通过适配不同设备的视口，可以确保所有用户都能访问和使用网页内容，提高网站的可访问性。

  6. 改善用户体验：通过适配视口，可以确保网页内容在不同设备上都能以合适的布局显示，避免内容溢出屏幕，提高用户的浏览体验。

  7. 控制布局视口与视觉视口：在移动设备上，布局视口通常与视觉视口相匹配，但通过CSS和JavaScript，开发者可以控制这两个视口的行为，实现更复杂的布局和交互效果。

  8. 支持触摸操作：在移动设备上，视口的设置可以影响触摸操作的精确度和响应性，合理的视口设置可以提高触摸操作的体验。

总之，在移动设备上，视口的作用是确保网页内容能够适应不同设备的屏幕尺寸和分辨率，提供良好的用户体验和性能。通过合理设置视口，开发者可以实现响应式设计，优化移动设备上的网页显示效果。

二、布局视口（Layout Viewport）

布局视口（Layout Viewport）是移动Web开发中一个非常重要的概念。它主要指的是浏览器中用于渲染网页内容的区域，这个区域决定了网页的宽度和高度，是CSS布局的基础。以下是关于布局视口的一些详细解释：

  1. 定义与作用：布局视口是浏览器内部用来进行页面渲染的区域，它决定了网页的宽度和高度。在桌面浏览器中，布局视口通常与浏览器窗口的宽度一致。而在移动端，由于屏幕尺寸的限制，布局视口的宽度通常会被设置成一个固定的值（如980px），这个值大于或等于设备屏幕的宽度，以确保网页内容能够完整显示在屏幕上。

  2. 与视觉视口的区别：布局视口与视觉视口（Visual Viewport）不同，视觉视口是用户当前可以看到的网页部分，用户可以通过缩放操作视觉视口，但这不会影响布局视口的大小。布局视口的大小是由浏览器和开发者通过设置来决定的。

  3. 获取布局视口尺寸：在JavaScript中，可以通过document.documentElement.clientWidth和document.documentElement.clientHeight来获取布局视口的宽度和高度。

  4. 响应式设计中的重要性：在响应式设计中，布局视口的设置对于网页的适配至关重要。通过设置<meta>标签中的viewport属性，可以控制布局视口的宽度和缩放行为，从而实现网页在不同设备上的适配。

  5. 默认设置：在大多数移动设备上，浏览器会默认设置一个布局视口的宽度，这个宽度可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕上展示，因此需要通过设置<meta>标签来调整布局视口的宽度，使其与设备屏幕宽度相匹配。

  6. 影响：布局视口的大小直接影响CSS布局的计算，因此对于开发者来说，了解和控制布局视口的大小是非常重要的，它决定了网页元素在页面上的摆放和比例。

综上所述，布局视口是网页设计和开发中一个核心的概念，特别是在移动设备上，合理的布局视口设置可以确保网页内容在不同设备上都能以最佳的布局和比例显示。

三、视觉视口（Visual Viewport）

视觉视口（Visual Viewport）是用户在浏览器窗口中实际可见的那部分网页内容的区域。它与布局视口（Layout Viewport）不同，视觉视口关注的是用户当前能够直接看到的内容范围。以下是视觉视口的一些关键点：

  1. 用户可见区域：视觉视口是用户在屏幕上直接看到的部分，它随着用户的滚动、缩放等操作而变化。用户可以通过滚动条来改变视觉视口的位置，或者通过缩放来改变视觉视口的大小。

  2. 与布局视口的关系：视觉视口是布局视口的一个子集，它显示了布局视口内容的一部分。布局视口定义了网页内容的完整尺寸，而视觉视口则显示了这些内容中用户当前可以看到的部分。

  3. 动态变化：视觉视口的大小和位置是动态变化的，它随着用户的交互而变化。例如，当用户在移动设备上缩放网页时，视觉视口的大小会改变，但布局视口的大小保持不变。

  4. 滚动行为：在大多数情况下，视觉视口会随着用户的滚动操作而移动，显示布局视口中的不同部分。这意味着用户可以通过滚动来查看布局视口内不在视觉视口显示范围内的内容。

  5. 缩放影响：用户可以通过缩放操作来改变视觉视口的大小，这会影响网页的显示效果。例如，在移动设备上，用户可能会放大某个区域以便更清楚地查看细节。

  6. 获取视觉视口尺寸：在JavaScript中，可以通过window.innerWidth和window.innerHeight来获取视觉视口的宽度和高度。

  7. 用户体验：视觉视口的设计对于用户体验至关重要。合理的视觉视口设置可以确保用户在不同设备和不同交互下都能获得良好的浏览体验。

  8. 响应式设计：在响应式设计中，视觉视口的设置可以帮助网页内容适应不同的屏幕尺寸和用户交互，提供一致的用户体验。

总结来说，视觉视口是用户在浏览器窗口中实际可见的网页内容区域，它随着用户的滚动和缩放操作而动态变化。理解视觉视口对于开发适应不同设备和用户交互的网页至关重要。

四、理想视口（Ideal Viewport）

理想视口（Ideal Viewport）是针对移动设备优化的视口设置，旨在确保网页在不同尺寸的屏幕上都能呈现出良好的阅读体验，无需用户进行缩放或水平滚动。以下是理想视口的详细解释：

  1. 定义：理想视口是指网页设计时的一个目标视口尺寸，这个尺寸应该使得网页在不同的设备上都能够呈现出最佳的视觉效果。理想视口的大小通常是指在不放大也不缩小的情况下，用户可以在移动设备上舒适地阅读和使用网页。

  2. 使用场景：理想视口的使用场景主要是在移动设备上的网页设计中。由于移动设备的屏幕尺寸多样，而且用户期望在任何设备上都能获得一致的浏览体验，因此理想视口成为了响应式设计的一个重要组成部分。

  3. 底层原理：理想视口的底层原理涉及到浏览器如何处理网页内容的渲染。浏览器默认的视口大小可能与设备的实际屏幕尺寸不同，这会导致页面在不同的设备上显示效果不一致。通过设置meta标签中的viewport属性，浏览器会按照标签中的设置来调整视口大小和缩放比例，从而达到理想的显示效果。

  4. 设置方法：在HTML文档的<head>部分添加meta标签来定义理想视口，例如：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    这个设置使得视口宽度等于设备的宽度，并且初始缩放比例为1，这样用户在打开页面时，就可以看到一个适应设备屏幕宽度的页面，且内容大小适中。

  5. 与设备屏幕的关系：理想视口的宽度等于移动设备的屏幕宽度，只要在CSS中把某一元素的宽度设为理想视口的宽度（单位用px），那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。理想视口的意义在于，无论在何种分辨率的屏幕下，那些针对理想视口而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

  6. 跨设备一致性：理想视口确保了不同设备上呈现效果的一致性，因为是通过布局容器等比缩放的，元素大小不会因为设备的不同而改变，从而提高了用户体验。

  7. 响应式设计基础：理想视口是响应式设计的基础，它允许开发者创建出能够适应不同屏幕尺寸和分辨率的网页，从而提供更好的用户体验。

总结来说，理想视口是移动设备上为了提供最佳浏览体验而设置的视口尺寸，它通过meta标签定义，确保网页内容能够适应不同设备的屏幕，无需用户进行额外的缩放或滚动操作。

视口是移动端开发中的关键概念，其中理想视口的应用最为广泛，因为它能提供最佳的用户体验。通过合理设置<meta>标签的属性，可以使页面宽度适应屏幕宽度，避免不必要的缩放操作，确保内容的可读性和可用性。

五、视口设置

理想视口的设置主要是通过在HTML文档的<head>部分添加<meta>标签来实现的，这个标签告诉浏览器如何控制布局视口的大小和比例。以下是理想视口设置的一些关键属性和示例：

关键属性

  1. width: 定义视口的宽度。通常设置为device-width，意味着视口宽度将与设备屏幕的宽度相匹配。
  2. initial-scale: 定义页面的初始缩放比例。通常设置为1.0，表示页面将以1:1的比例显示，即不缩放。
  3. user-scalable: 控制用户是否可以缩放视图。设置为no时，禁止用户缩放页面。
  4. minimum-scale 和 maximum-scale: 分别定义用户可以缩放到的最小和最大缩放比例。

示例代码

以下是一些理想视口设置的示例：

示例1：基本设置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 页面内容 -->
</body>
</html>

在这个例子中，width=device-width设置视口宽度为设备的宽度，initial-scale=1.0设置初始缩放比例为1，这样用户在打开页面时，就可以看到一个适应设备屏幕宽度的页面，且内容大小适中。

示例2：禁止缩放
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 页面内容 -->
</body>
</html>

在这个例子中，添加了user-scalable=no属性到<meta>标签中，这将禁止用户对网页进行缩放操作。

示例3：限制最小宽度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"><title>Document</title>
</head>
<body><!-- 页面内容 -->
</body>
</html>

在这个例子中，添加了minimum-scale=1.0属性到<meta>标签中，这将限制视口的最小缩放比例为1.0。

通过这些设置，开发者可以确保网页在移动设备上以合适的方式显示，提供良好的用户体验。

六、像素

物理像素和物理像素比是数字显示技术中的两个重要概念，它们对于理解屏幕显示和图像渲染至关重要，尤其是在移动设备和网页设计领域。

物理像素

物理像素指的是屏幕上能够独立控制的最小显示单元。它是屏幕显示的最小颗粒，物理上真实存在的。每个物理像素包含红、绿、蓝（RGB）三个子像素，它们共同决定了一个像素点的颜色。物理像素的数量决定了屏幕的分辨率。例如，一个分辨率为1920x1080的屏幕意味着它有1920个水平像素和1080个垂直像素，总共约有207万个物理像素。

物理像素比（Device Pixel Ratio, DPR）

物理像素比，也称为设备像素比（DPR），是指一个CSS像素（网页设计中的逻辑像素单位）相对于物理像素的数量。这个比例告诉我们在屏幕上一个CSS像素实际上由多少个物理像素点来构成。

  • 1:1的物理像素比：在传统的屏幕或早期的移动设备上，一个CSS像素对应一个物理像素，即物理像素比为1:1。
  • 2:1的物理像素比：在Retina显示屏等高分辨率屏幕上，一个CSS像素可能由四个物理像素构成，即物理像素比为2:1。这意味着屏幕可以在相同的空间内显示更多的细节，使图像看起来更清晰。

物理像素比对于开发者来说非常重要，因为它影响到网页和应用中元素的实际显示大小。例如，如果一个元素在CSS中设置为100px宽，在2:1的DPR屏幕上，它实际上会占用200个物理像素的宽度，因此在屏幕上看起来会更小。

了解物理像素和物理像素比有助于开发者创建适应不同设备和屏幕分辨率的响应式设计，确保内容在各种设备上都能以最佳效果显示。

七、二倍图

二倍图（2x Image）是指在移动开发和网页设计中，为了适应高分辨率（高DPR）屏幕而使用的一种图像资源。这种图像的尺寸是标准图像尺寸的两倍，以确保在高DPR设备上显示时能够保持清晰度和细节。

为什么需要二倍图

在高DPR（如2倍或更高）的屏幕上，一个CSS像素可能对应多个物理像素。如果直接使用标准尺寸的图像，那么在高DPR屏幕上显示时，图像可能会被拉伸，导致图像失真和模糊。为了解决这个问题，开发者会使用二倍图，即图像的实际像素尺寸是CSS尺寸的两倍。

如何使用二倍图

  1. 图像资源：开发者会为高DPR设备准备两倍尺寸的图像资源。例如，如果一个图标在CSS中设置为50x50像素，那么开发者会提供一个100x100像素的图像文件作为二倍图。

  2. 媒体查询：在CSS中，可以使用媒体查询来根据设备的DPR选择合适的图像资源。例如：

    img {src: url('1x-image.png') /* 标准图像 */
}
@media (min-resolution: 2dppx) {img {src: url('2x-image.png') /* 二倍图像 */}
}

    这段代码会根据设备的DPR自动选择适当的图像资源。

  3. HTML属性：在HTML中，也可以通过srcset属性为不同的DPR指定不同的图像资源：

    <img src="1x-image.png" srcset="2x-image.png 2x" alt="description">

    这里srcset属性告诉浏览器，如果设备的DPR是2倍或更高，就使用2x-image.png作为图像资源。

通过使用二倍图，开发者可以确保在不同DPR的设备上都能提供最佳的图像显示效果，从而提升用户体验。

八、移动端开发选择

在选择移动端页面开发方案时，既可以开发专用的移动端页面，也可以采用响应式开发兼容移动端，需要考虑以下几个关键因素：

  1. 用户体验（UX）：

    • 响应式设计：这种设计能够确保网站在不同设备和屏幕尺寸上都能呈现出良好的视觉效果和用户体验。响应式设计可以提高用户的满意度和忠诚度，因为它能够自动适应不同的屏幕大小和分辨率。
    • 移动端专用页面：为移动端用户提供专门优化的界面，可以提供更符合移动设备使用习惯的体验，尤其是在交互设计和页面布局上。

  2. 开发和维护成本：

    • 响应式设计：可以减少开发成本，因为您不需要为每个设备单独设计和开发界面。维护成本也较低，因为只需一套代码库。
    • 移动端专用页面：可能需要更多的开发和维护工作，因为需要为移动端和桌面端分别设计和维护两套不同的代码库。

  3. SEO优化：

    • 响应式设计：对SEO更为友好，因为它适合移动设备，这类网站在搜索引擎结果中的排名更高。
    • 移动端专用页面：可能需要额外的SEO策略来优化两个版本的页面。

  4. 性能和速度：

    • 响应式设计：可能会因为需要加载更多的CSS和JavaScript来适应不同的屏幕尺寸而导致页面加载时间较长。
    • 移动端专用页面：可以针对移动设备优化资源加载，可能会有更好的加载速度和性能。

  5. 跨平台兼容性：

    • 响应式设计：可以确保应用在不同操作系统和设备上都能正常运行，降低开发成本和维护难度。
    • 移动端专用页面：可能需要为不同的操作系统和设备进行特定的优化。

  6. 项目目标和资源：

    • 如果您需要最佳性能，并且有预算和时间，原生开发（移动端专用页面）是您的最佳选择。
    • 如果您希望以更经济的方式实现跨平台兼容性，可以考虑响应式设计。

综上所述，选择响应式设计还是移动端专用页面，取决于您的项目需求、预算、时间表、目标受众和应用程序要求。响应式设计提供了更好的用户体验和SEO优势，而移动端专用页面可能提供更优的性能和更针对性的用户体验。您需要根据这些因素来做出最适合您项目的决策。

九、常见问题处理

1. 浏览器兼容问题

在移动端页面开发中，浏览器兼容性是一个常见问题。由于移动端浏览器普遍基于Webkit内核，我们主要需要考虑Webkit的兼容性问题。Webkit对HTML5和CSS3的支持度很高，因此在制作移动端页面时可以放心使用这些技术。遇到兼容性问题时，可以通过添加Webkit私有前缀（-webkit-）来解决。

2. CSS初始化

在静态网页项目中，我们通常使用reset.css来清除浏览器默认样式。但在移动端，推荐使用Normalize.css来统一不同浏览器的默认样式，而不是全部清除。Normalize.css是一种可定制的CSS文件，它保留了一些有价值的默认样式，并解决了浏览器默认样式的兼容性问题。

Normalize.css的优点：
  • 保护有价值的默认值
  • 修复浏览器的bug，统一不同浏览器的渲染标准
  • 模块化文件，提高文件可用性
  • 拥有详细的文档，方便使用和演示

3. CSS3盒模型（box-sizing）

在移动端开发中，我们有时希望元素的宽高固定，不受padding和border的影响。CSS3的box-sizing属性可以帮助我们实现这一效果。通过将box-sizing设置为border-box，元素的宽高将包括border和padding，从而保持整体宽高不变。

4. 特殊样式处理

在移动端，我们可能需要处理一些特殊样式，例如：

  • 清除点击高亮效果：设置-webkit-tap-highlight-color为transparent。
  • 去除iOS默认外观：设置-webkit-appearance为none。
  • 禁用长按弹出菜单：设置-webkit-touch-callout为none。

以上是移动端页面开发中常见的问题及其解决方案，希望对您有所帮助。在实际开发过程中，我们可以根据具体需求选择合适的方法来解决这些问题。

十、技术选型

1. 单独制作移动端页面技术类型

流式布局（百分比布局）

流式布局是一种使用百分比来设置元素宽度的技术，使得元素宽度可以根据父元素宽度的变化自动调整，以适应不同设备的分辨率。这种布局方式简单易行，主要利用百分比的特性。

Flex弹性布局

Flex弹性布局是一种更为先进的布局技术，相较于百分比布局，它提供了更多的布局可能性。Flex布局不仅可以处理水平方向的布局分布，还能处理垂直方向的布局。与浮动和定位相比，Flex布局更加稳定，不会脱离标准流，避免了浮动的一些缺陷。

LESS + REM + 媒体查询布局

这种布局方式的重点是REM单位，它允许我们在设置水平方向分布的同时，也能等比例地调整垂直方向。媒体查询是移动端开发中常用的技术，可以根据设备宽度决定页面效果。LESS是一种CSS预处理器，使得CSS也能体验编程化的制作方式。

2. 响应式页面技术选型

媒体查询

在制作响应式页面时，媒体查询是必不可少的技术，它可以根据设备宽度来判断并应用不同的样式规则。

Bootstrap框架

为了简化响应式页面的开发，可以利用Bootstrap这样的框架，它能够减少开发工作量，许多内容可以直接从框架中复制并稍作修改后使用。

3. 综合应用

在实际开发中，我们可能不会单独使用某一种布局技术，而是根据页面的不同区域和需求，综合使用上述技术进行混合布局。

根据公司的具体需求，如果需要制作单独的移动端页面，可以在上述技术中选择一种或几种进行使用。如果是制作响应式页面，推荐使用媒体查询加Bootstrap的方式。以上就是移动端技术选型的相关内容。

相关文章：

青少年编程与数学 02-005 移动Web编程基础 02课题、视口与像素

青少年编程与数学 02-005 移动Web编程基础 02课题、视口与像素 一、视口二、布局视口&#xff08;Layout Viewport&#xff09;三、视觉视口&#xff08;Visual Viewport&#xff09;四、理想视口&#xff08;Ideal Viewport&#xff09;五、视口设置关键属性示例代码示例1&…...

编程日记 2025/5/18 12:43:39

深度学习blog-Transformer-注意力机制和编码器解码器

注意力机制&#xff1a;当我们看一个图像或者听一段音频时&#xff0c;会根据自己的需求&#xff0c;集中注意力在关键元素上&#xff0c;以获取相关信息。 同样地&#xff0c;注意力机制中的模型也会根据输入的不同部分&#xff0c;给它们不同的权重&#xff0c;并集中注意力在…...

编程日记 2025/5/18 12:31:32

【论文投稿】Python 网络爬虫：探秘网页数据抓取的奇妙世界

【IEEE出版|广东工业大学主办】第五届神经网络、信息与通信工程国际学术会议&#xff08;NNICE 2025&#xff09;_艾思科蓝_学术一站式服务平台 目录 前言 一、Python—— 网络爬虫的绝佳拍档 二、网络爬虫基础&#xff1a;揭开神秘面纱 &#xff08;一&#xff09;工作原…...

编程日记 2025/5/5 23:58:19

【总结整理】 神经网络与深度学习 邱锡鹏 课后习题答案 扩展阅读链接

本文主要针对神经网络神经网络邱锡鹏 2~8 章的课后习题进行理解的过程中&#xff0c;搜索到的讲的会比较透彻的链接整理。适合有一定基础但是想了解更细的人阅读。 主要参考书籍 首先是本书pdf可在神经网络与深度学习获取&#xff1b; 主要参考的课后习题答案为nndl/solution…...

编程日记 2025/5/17 3:33:54

华为手机建议使用adb卸载的app

按需求自行卸载 echo 卸载智慧搜索 adb shell pm uninstall -k --user 0 com.huawei.search echo 卸载智慧助手 adb shell pm uninstall -k --user 0 com.huawei.intelligent echo 卸载讯飞语音引擎 adb shell pm uninstall -k --user 0 com.iflytek.speechsuite echo 卸载快应…...

编程日记 2025/5/16 8:52:57

找到一个linux静态库动态库的好资料.2

# 正文 继续整理从这个页面学到的东西&#xff1a;https://tldp.org/HOWTO/Program-Library-HOWTO 这一篇主要参考这俩&#xff1a; https://tldp.org/HOWTO/Program-Library-HOWTO/introduction.html https://tldp.org/HOWTO/Program-Library-HOWTO/static-libraries.html 这…...

编程日记 2025/5/18 10:16:56

存储块的原理与创建

目录 问题概述 malloc和free 固定块大小分配 设计原理 设计实现 为RTOS提供内存管理与回收机制 问题概述 malloc和free extern void *malloc(unsigned int num_bytes); //malloc向系统申请分配指定size个字节的内存空间。 //返回类型是void *类型 extern void free(void *ptr);…...

编程日记 2025/5/10 11:35:04

RabbitMQ工作模式（详解 工作模式：简单队列、工作队列、公平分发以及消息应答和消息持久化）

文章目录 十.RabbitMQ10.1 简单队列实现10.2 Work 模式&#xff08;工作队列&#xff09;10.3 公平分发10.4 RabbitMQ 消息应答与消息持久化消息应答概念配置 消息持久化概念配置 十.RabbitMQ 10.1 简单队列实现 简单队列通常指的是一个基本的消息队列&#xff0c;它可以用于…...

编程日记 2025/5/16 2:51:37

电脑提示报错NetLoad.dll文件丢失或损坏？是什么原因？

一、NetLoad.dll文件丢失或损坏的根源 程序安装不完整&#xff1a;某些程序在安装过程中可能因为磁盘错误、网络中断或安装程序本身的缺陷&#xff0c;导致NetLoad.dll文件未能正确安装或复制。 恶意软件攻击&#xff1a;病毒、木马等恶意软件可能会篡改或删除系统文件&#x…...

编程日记 2025/5/12 12:51:41

【物联网技术与应用】实验15：电位器传感器实验

实验15 电位器传感器实验 【实验介绍】 电位器可以帮助控制Arduino板上的LED闪烁的时间间隔。 【实验组件】 ● Arduino Uno主板* 1 ● 电位器模块* 1 ● USB电缆*1 ● 面包板* 1 ● 9V方型电池* 1 ● 跳线若干 【实验原理】 模拟电位器是模拟电子元件&#xff0c;模…...

编程日记 2025/5/16 2:13:11

WPF 绘制过顶点的圆滑曲线（样条，贝塞尔）

项目中要用到样条曲线&#xff0c;必须过顶点&#xff0c;圆滑后还不能太走样&#xff0c;捣鼓一番&#xff0c;发现里面颇有玄机&#xff0c;于是把我多方抄来改造的方法发出来&#xff0c;方便新手&#xff1a; 如上图&#xff0c;看代码吧&#xff1a; -------------------…...

编程日记 2025/5/14 5:22:14

YOLOv9-0.1部分代码阅读笔记-assigner.py

assigner.py utils\tal\assigner.py 目录 assigner.py 1.所需的库和模块 2.def select_candidates_in_gts(xy_centers, gt_bboxes, eps1e-9): 3.def select_highest_overlaps(mask_pos, overlaps, n_max_boxes): 4.class TaskAlignedAssigner(nn.Module): 1.所需的库…...

编程日记 2025/5/17 10:40:41

mybatis-plus自动填充时间的配置类实现

mybatis-plus自动填充时间的配置类实现 在实际操作过程中&#xff0c;我们并不希望创建时间、修改时间这些来手动进行&#xff0c;而是希望通过自动化来完成&#xff0c;而mybatis-plus则也提供了自动填充功能来实现这一操作&#xff0c;接下来&#xff0c;就来了解一下mybatis…...

编程日记 2025/5/16 9:35:27

fgets TAILQ_INSERT_TAIL

If you’re using the macros from <sys/queue.h> to implement a circular doubly linked list (TAILQ), the inversion issue occurs because you’re using LIST_INSERT_HEAD, which inserts at the head of the list. Instead, to maintain the original order (FIFO…...

编程日记 2025/5/15 14:57:49

upload-labs关卡记录12

直接上传一句话木马&#xff0c;发现提示&#xff1a; 很明显这是一个白名单&#xff0c;而且不是前端的js检查&#xff0c;而是服务端的检查&#xff0c;因此我们使用bp抓包&#xff0c;改一下文件类型试试&#xff1a; 找到包之后&#xff0c;我们对content-type进行一个更改…...

编程日记 2025/5/14 13:02:52

服务器被攻击怎么办

当服务器遭受恶意流量攻击&#xff0c;如DDoS&#xff08;分布式拒绝服务&#xff09;或CC&#xff08;Challenge Collapsar&#xff09;攻击时&#xff0c;传统的防护措施可能不足以应对。此时&#xff0c;采用高防IP服务可以有效缓解攻击压力&#xff0c;确保业务连续性和数据…...

编程日记 2025/5/15 10:46:11

Node.js 助力前端开发：自动化操作实战

前端开发中&#xff0c;重复性任务如新建文件、配置路由、生成组件等&#xff0c;往往耗时且容易出错。借助 Node.js 的强大能力&#xff0c;我们可以实现开发过程中的自动化操作&#xff0c;提高效率。 文章目录 自动生成 router 配置文件自动生成组件模板动态构建导航菜单自…...

编程日记 2025/5/18 10:48:17

MATLAB符号计算-符号表达式基础运算操作

1.1.2符号变量取值域的限定 默认复数域 【例1-1-2】解不等式 1.1.3创建符号表达式 对符号对象进行各种运算&#xff08;算术运算、关系运算、逻辑运算&#xff09;&#xff0c;即可创建符号表达式。 1.算术运算与转置 【例1-1-3】 f5是f4的共轭转置 f6是f4的转置 2.关系…...

编程日记 2025/5/13 23:39:20

ADB 上传文件并使用脚本监控上传百分比

有个需求&#xff0c;需要测试 emmc的外部连续写入性能&#xff0c;使用 ADB 上传一个巨大的文件。并且在上传到一定值时进行干预。 因此但是 adb push 命令本身会 block 运行并且不返回进度&#xff0c;因此需要一个额外的监控脚本。 上传脚本&#xff1a; echo off setloc…...

编程日记 2025/5/15 20:44:56

深入解析MySQL索引结构：从数组到B+树的演变与优化

前言&#xff1a; 在数据库查询中&#xff0c;索引是一种关键的性能优化工具。然而&#xff0c;索引的失效可能导致查询效率大幅下降。为了更好地理解索引的工作原理及规避其失效&#xff0c;深入了解索引结构的演变过程尤为重要。 MySQL 的索引数据结构从简单到复杂&#xff0…...

编程日记 2025/5/13 0:04:41

【玩转MacBook】JDK安装

下载 JDK 8 官网&#xff1a;https://www.oracle.com/cn/java/technologies/downloads/archive/ 找到 JDK 8 选择&#xff1a; 安装 JDK 双击 .dmg 文件&#xff1a; 继续双击&#xff1a; “继续” “继续” 走到这里&#xff0c;我发现只能选择这个“为这台电脑上的所有…...

编程日记 2025/5/18 0:57:30

word无法创建工作文件，检查临时环境变量。

word无法创建工作文件&#xff0c;检查临时环境变量。 word preview版本&#xff0c;关联打开文件出现报错。word无法创建工作文件&#xff0c;检查临时环境变量。 打开注册表&#xff0c;删除键 Word Preview: HKCR\CLSID{84F66100-FF7C-4fb4-B0C0-02CD7FB668FE} PowerPoint …...

编程日记 2025/5/17 14:30:16

威联通NAS部署openwrt软路由保姆级教程附镜像文件

创作立场&#xff1a;原创不易&#xff0c;拒绝搬运~ hello 大家好&#xff0c;我是你们的老伙伴&#xff0c;稳重的大王~ 本期教程为大家分享&#xff0c;怎么在NAS里面部署软路由&#xff0c;下面是软路由的镜像文件&#xff0c;有两个版本&#xff0c;400M的是定制版~ Sh…...

编程日记 2025/5/13 22:33:54

MySQL共享锁，排他锁

在 MySQL 中&#xff0c;共享锁&#xff08;S 锁&#xff09; 和 排他锁&#xff08;X 锁&#xff09; 是两种主要的锁机制&#xff0c;用于处理事务的并发控制。它们的作用和行为如下&#xff1a; 1. 共享锁 (S 锁) 定义&#xff1a; 共享锁允许事务对某一行数据进行读取&am…...

编程日记 2025/5/14 3:14:15

2. FPGA基础了解--全局网络

前言 引入扇出的概念介绍FPGA中的全局网络为后续时序优化埋下伏笔 扇出 在FPGA设计中扇出是一个重要的概念&#xff0c;所谓的扇出就是一个控制信号所能控制的数据信号的总个数&#xff0c;比如ctrl信号的扇出就是16 reg ctrl 0; reg [15:0] out 0; always (posedge c…...

编程日记 2025/5/5 4:40:36

[c++进阶(三)]单例模式及特殊类的设计

1.前言 在实际场景中,总会遇见一些特殊情况,比如设计一个类,只能在堆上开辟空间, 或者是设计一个类只能实例化一个对象。那么我们应该如何编写代码呢&#xff1f;本篇将会详细的介绍 本章重点&#xff1a; 本篇文章着重讲解如何设计一些特殊 的类,包括不能被拷贝,只能在栈/堆上…...

编程日记 2025/5/14 6:02:34

js版本之ES6特性简述【let和const、数组、函数、集合、Symbol】(四)

目录 let [块级作用域] 和const简述 Array.from Array.of Array.prototype中新增的方法 for...of 函数参数调整 集合类型 Map Set WeakMap WeakSet Set WeakSet Map WeakMap Symbol 类型 let [块级作用域] 和const简述 ES6 新增了let命令&#xff0c;用来声明变…...

编程日记 2025/5/15 13:36:03

重温设计模式--4、组合模式

文章目录 1 、组合模式&#xff08;Composite Pattern&#xff09;概述2. 组合模式的结构3. C 代码示例4. C示例代码25 .应用场景 1 、组合模式&#xff08;Composite Pattern&#xff09;概述 定义&#xff1a;组合模式是一种结构型设计模式&#xff0c;它允许你将对象组合成…...

编程日记 2025/5/16 2:50:20

解决Ubuntu下无法装载 Windows D盘的问题

电脑安装了 Windows 和 Ubuntu 24.04 后&#xff0c;在Ubuntu系统上装载 D盘&#xff0c;发现无法装载错误如下&#xff1a; Error mounting /dev/nvme0n1p4 at /media/jackeysong/Data: wrong fs type, bad option, bad superblock on /dev/nvme0n1p4, missing codepage or h…...

编程日记 2025/5/8 9:26:59

详细介绍如何使用rapidjson读取json文件

本文主要详细介绍如何使用rapidjson库来实现.json文件的读取&#xff0c;分为相关基础介绍、结合简单示例进行基础介绍、结合复杂示例进行详细的函数实现介绍等三部分。 一、相关基础 1、Json文件中的{} 和 [] 在 JSON 文件中&#xff0c;{} 和 [] 分别表示不同的数据结构&…...

编程日记 2025/5/17 5:23:18

Mybatis 如何复用 SQL

比如你的Mapper是这样写的&#xff1a; 但这个接口是没有分页的&#xff0c;你还想再写一个有分页的查询接口&#xff0c;两个接口SQL一模一样&#xff0c;只是多了分页特性。你可以直接重载一个方法&#xff0c;增加分页参数&#xff0c;即可复用该SQL。如下&#xff1a;...

编程日记 2025/5/9 18:33:01

使用 Python 操作 MySQL 数据库的实用工具类：MySQLHandler

操作数据库是非常常见的需求&#xff0c;使用 Python 和 pymysql 库封装一个通用的 MySQL 数据库操作工具类&#xff0c;并通过示例演示如何使用这个工具类高效地管理数据库。 工具类的核心代码解析 MySQLHandler 类简介 MySQLHandler 是一个 Python 类&#xff0c;用于简化…...

编程日记 2025/5/14 9:47:57

C++ 内存管理：原理、技巧与实战

目录 第一章：C++ 内存管理基础 1.1 C++ 内存布局剖析 1.2 内存分配与释放：核心机制详解 1.2.1 new/delete 操作符 1.2.2 malloc/free 函数 第二章：智能指针 —— 内存管理利器 2.1 智能指针概览 2.2 常用智能指针类型 2.2.1 unique_ptr 2.2.2 shared_ptr 2.2.3 we…...

编程日记 2025/5/17 8:01:40

算法学习（17）—— FloodFill算法

目录 关于FloodFill算法 部分OJ题详解 733. 图像渲染 200. 岛屿数量 695. 岛屿的最大面积 130. 被围绕的区域 417. 太平洋大西洋水流问题 529. 扫雷问题 LCR130. 衣橱整理 关于FloodFill算法 爆搜&#xff0c;深搜&#xff0c;回溯的算法原理并不难&#xff0c;这类题…...

编程日记 2025/5/14 22:40:52

Kubernetes ConfigMap的创建与使用

前提条件 拥有Kubernetes集群环境&#xff0c;可参考&#xff1a;Kubernetes集群搭建理解Kubernetes部署知识&#xff0c;可参考&#xff1a;使用Kubernetes部署第一个应用 、Deloyment控制器 ConfigMap简介 ConfigMap 是 Kubernetes&#xff08;通常简称为 K8s&#xff09;中…...

编程日记 2025/5/15 17:54:13

灵当CRM uploadfile.php 文件上传致RCE漏洞复现

0x01 产品简介 灵当CRM是一款专为中小企业打造的智能客户关系管理工具，由上海灵当信息科技有限公司开发并运营。广泛应用于金融、教育、医疗、IT服务、房地产等多个行业领域，帮助企业实现客户个性化管理需求，提升企业竞争力。无论是新客户开拓、老客户维护，还是销售过程管…...

编程日记 2025/5/12 15:15:41

老旧小区用电安全保护装置#限流式防火保护器参数介绍#

摘要 随着居民住宅区用电负荷的增加&#xff0c;用电安全问题日益突出&#xff0c;火灾隐患频繁发生。防火限流式保护器作为一种新型电气安全设备&#xff0c;能够有效预防因电气故障引发的火灾事故。本文介绍了防火限流式保护器的工作原理、技术特点及其在居民住宅区用电系统…...

编程日记 2025/5/17 20:55:59

在git commit之前让其自动执行一次git pull命令

文章目录 背景原因编写脚本测试效果 背景原因 有时候可以看到项目的git 提交日志里好多 Merge branch ‘master’ of …记录。这些记录是怎么产生的呢&#xff1f; 是因为在本地操作 git add . 、 git commit -m "xxxxx"时&#xff0c;没有提前进行git pull操作&…...

编程日记 2025/5/17 17:33:18

【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例（2023/12/1更新）

文章目录 一、前言二、ShaderGraph1.什么是ShaderGraph2.在使用ShaderGraph时需要注意以下几点&#xff1a;3.优势4.项目 三、实例效果边缘发光进阶&#xff1a;带方向的菲涅尔边缘光效果裁剪进阶 带边缘色的裁剪溶解进阶 带边缘色溶解卡通阴影水波纹积雪效果不锈钢效果、冰晶效…...

编程日记 2025/5/12 8:58:06

单机和微服务的区别，微服务有什么问题？数据一致性问题怎么解决？幂等问题怎么解决？

单机和微服务的区别&#xff0c;微服务有什么问题&#xff1f;数据一致性问题怎么解决&#xff1f;幂等问题怎么解决&#xff1f; 单机架构和微服务架构在设计理念、部署和扩展性上有显著区别。 单机架构 vs 微服务架构 单机架构 定义&#xff1a;所有组件&#xff08;前端…...

编程日记 2025/5/14 6:24:22

McDonald‘s Event-Driven Architecture 麦当劳事件驱动架构

原文链接 1 mcdonalds-technical-blog/ 原文链接 2 mcdonalds-technical-blog/ 麦当劳在异步、事务性和分析性处理用例中使用跨技术栈的事件&#xff0c;包括移动订单进度跟踪和向客户发送营销通信&#xff08;交易和促销&#xff09;。 统一事件平台&#xff08;unified eve…...

编程日记 2025/5/6 15:53:44

Clickhouse（Centos）

地址信息 官网地址&#xff1a;Fast Open-Source OLAP DBMS - ClickHouse 下载地址&#xff1a;packages.clickhouse.com/rpm/stable/ 1.clickhouse-client-23.1.3.5.x86_64.rpm 2.clickhouse-common-static-23.1.3.5.x86_64.rpm 3.clickhouse-common-static-dbg-23.1.3.5.x86_…...

编程日记 2025/5/7 17:39:11

赛博错题本

机构抽象老师非得让我们整一个错题本&#xff0c;我寻思都学计算机了&#xff0c;还在整高中做题呢一套是什么意思呢&#xff0c;更何况考试也就一周一次&#xff0c;你整个本完完全全没有必要&#xff0c;整个赛博错题本得了。以后错题都会存在这里&#xff0c;基本上一周一更…...

编程日记 2025/5/14 12:00:14

【MySQL初阶】Ubuntu 环境安装 MySQL

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; 数据库初阶 &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 Ubuntu 系统安装 MySQL 的相关内容。 如果看到最后您觉得这篇…...

编程日记 2025/5/18 5:06:37

【Kubernetes 指南】基础入门——Kubernetes 基本概念（二）

目录 二、Pod 1、Pod 简介 2、Pod 图示 3、nginx 容器 二、Pod 1、Pod 简介 - Kubernetes 使用 Pod 来管理容器&#xff0c;每个 Pod 可以包含一个或多个紧密关联的容器。 - Pod 是一组紧密关联的容器集合&#xff0c;它们共享 PID、IPC、Network 和 UTS namespace&#…...

编程日记 2025/5/16 3:05:48

Ubuntu系统下 npm install -g tauri 报错问题处理

处理在安装 Tauri 时遇到的问题&#xff0c;可以按照以下步骤进行操作 npm install -g taurinpm warn deprecated inflight1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async …...

编程日记 2025/5/18 9:51:24

数字逻辑（六）——下载Digital软件

Digital是一种用于设计和仿真数字逻辑电路的教育工具&#xff0c;它是免费、开源和跨平台的。这款软件十分适合新人&#xff0c;可以使用画简单的电路。 1 下载Digital软件 首先Digital的下载地址是&#xff1a; https://github.com/hneemann/Digital ​ 下载完成之后&…...

编程日记 2025/5/13 12:58:43

Ruby Raider使用教程

Ruby Raider是什么&#xff1f; Ruby Raider 是一款生成器和脚手架 gem&#xff0c;可让 UI 测试自动化更容易 Github链接&#xff1a;https://github.com/RaiderHQ/ruby_raider 目前支持的框架 Web自动化测试 Cucumber and Selenium Rspec and Selenium Cucumber and Wa…...

编程日记 2025/5/17 3:48:58

音视频入门基础：AAC专题（13）——FFmpeg源码中，获取ADTS格式的AAC裸流音频信息的实现

音视频入门基础&#xff1a;AAC专题系列文章&#xff1a; 音视频入门基础&#xff1a;AAC专题&#xff08;1&#xff09;——AAC官方文档下载 音视频入门基础&#xff1a;AAC专题&#xff08;2&#xff09;——使用FFmpeg命令生成AAC裸流文件 音视频入门基础&#xff1a;AAC…...

编程日记 2025/5/13 2:16:40

Spring Boot 中的 @Scheduled 定时任务以及开关控制

Scheduled注解是Spring框架&#xff08;包括Spring Boot&#xff09;中用于实现定时任务的一种方式。以下是对Scheduled注解的详细解析&#xff1a; 一、基本概念 Scheduled注解允许开发者在Spring容器中定义定时任务。通过简单地在一个方法上添加Scheduled注解&#xff0c;S…...

编程日记 2025/5/15 15:27:30