文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

H5移动端开发学习总结

而完美视口需要通过viewport meta标签来进行相应的设置。 ###像素### 一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多，同一时间你可以看到的就越多。...每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。 理论上：1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。...在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。...如果不指定该属性（或者移除viewport meta标签），则layout viewport宽度为浏览器默认值。如：iPhone为980px。...但是当屏幕超过一定的尺寸以后还继续显示h5页面的话会给用户带来不好的体验。因此，我们需要给页面设置最大的宽度和最小宽度。

1.7K20

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

响应式界面的四个层次 同一页面在不同大小和比例上看起来都应该是舒适的； 同一页面在不同分辨率上看起来都应该是合理; 同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的； 同一页面在不同类型的设备...RWD 倾向于只改变元素的外观布局，而不大幅度改变内容。Jeffrey Zeldman 总结说，我们就把 RWD 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术。...后果是在支持它的网页上该属性正常展示，而不支持它的网页该属性不生效，但也不影响用户的基本使用。...优化图像通常可以最大限度地减少从网站下载的字节数以及提高网站性能。...其次，很多早期的文章规范都建议不要使用奇数级单位来定义字体大小（如 13px，15px...），容易在一些低端设备上造成字体模糊，出现锯齿。

3.8K32
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    移动web开发

    布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题....IOS,Android基本都将这个视口的分辨率设置为980px,所以PC上的网页大都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面....不同设备的不同像素比: PC端和早前的手机屏幕/普通手机屏幕:1CSS像素=1物理像素 Retina(视网膜屏幕)概念,可以把更多的物理像素点压缩在一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度...单位:长度|百分比|cover|contain cover把背景图片扩展至足够大,以使背景图像完全覆盖背景区域. contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域. cover和contain...-webkit-tap-highlight-color: transparent; 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式: -webkit-appearance

    3.2K21

    关于移动端适配，你必须要知道的

    当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。 2.3 图像分辨率 我们通常说的 图片分辨率其实是指图片含有的 像素数，比如一张图片的分辨率为 800x400。...它不能单纯的表达分辨率和 PPI，只能一种表达视觉效果。 让多个物理像素渲染一个独立像素只是 Retina屏幕为了达到效果而使用的一种技术。而不是所有 DPR>1的屏幕就是 Retina屏幕。...4.6 缩放 上面提到 width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置 initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是 width和视觉视口宽度的最大值...例如：若手机的理想视口宽度为 400px，设置 width=device-width， initial-scale=2，此时 视觉视口宽度=理想视口宽度/initial-scale即 200px，布局视口取两者最大值即...如：在 dpr=2的屏幕上展示两倍图 (@2x)，在 dpr=3的屏幕上展示三倍图 (@3x)。 ?

    2.8K41

    关于移动端适配，你必须要知道的

    当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。 2.3 图像分辨率 我们通常说的 图片分辨率其实是指图片含有的 像素数，比如一张图片的分辨率为 800x400。...它不能单纯的表达分辨率和 PPI，只能一种表达视觉效果。 让多个物理像素渲染一个独立像素只是 Retina屏幕为了达到效果而使用的一种技术。而不是所有 DPR>1的屏幕就是 Retina屏幕。...4.6 缩放 上面提到 width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置 initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是 width和视觉视口宽度的最大值...例如：若手机的理想视口宽度为 400px，设置 width=device-width， initial-scale=2，此时 视觉视口宽度=理想视口宽度/initial-scale即 200px，布局视口取两者最大值即...如：在 dpr=2的屏幕上展示两倍图 (@2x)，在 dpr=3的屏幕上展示三倍图 (@3x)。 ?

    2.8K10

    关于移动端适配，你必须要知道的

    当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。 2.3 图像分辨率 我们通常说的 图片分辨率其实是指图片含有的 像素数，比如一张图片的分辨率为 800x400。...它不能单纯的表达分辨率和 PPI，只能一种表达视觉效果。 让多个物理像素渲染一个独立像素只是 Retina屏幕为了达到效果而使用的一种技术。而不是所有 DPR>1的屏幕就是 Retina屏幕。...4.6 缩放 上面提到 width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置 initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是 width和视觉视口宽度的最大值...例如：若手机的理想视口宽度为 400px，设置 width=device-width， initial-scale=2，此时 视觉视口宽度=理想视口宽度/initial-scale即 200px，布局视口取两者最大值即...如：在 dpr=2的屏幕上展示两倍图 (@2x)，在 dpr=3的屏幕上展示三倍图 (@3x)。 ?

    2.9K20

    PC项目移动端适配实战 | Viewport Meta配置与DPR动态计算实践

    但屏幕尺寸碎片化（从320px到1440px+）、设备像素比（DPR）差异（1x/2x/3x）导致布局错位、图像模糊、交互失效等问题频发。...= 设备逻辑宽度（如iPhone 13为390px）。...('meta[name="viewport"]');// 动态设置 viewport meta 标签的 content 属性，将页面宽度设置为设备宽度，// 并将初始缩放比例和最大缩放比例设置为计算得到的...物理像素与设备无关像素的比值（如iPhone6的DPR=2）。兼容处理：旧版IE等不支持的浏览器默认取1。典型值域：普通屏幕：DPR=1。Retina屏幕：DPR=2/3。4K屏幕：DPR=3+。...PC端：限制最大适配宽度1024px。兼容处理：避免超大屏幕显示失真。保障平板设备的显示合理性。3.2.3 换算体系1、REM换算公式开发实践：设计稿量取50px => 代码写0.5rem。

    95830

    第135天：移动端开发经验总结

    一、移动端三种布局 　　1、有最大、最小宽度的百分比自适应布局 　　适用场景：门户网站首页，图片较多的首页。 　　2、百分比自适应布局 　　适用场景：信息文字较多的网页，内容较多网页。 　　...不管当前有多少只手指 touchmove：当手指在屏幕上滑动时连续触发。...四、常见的移动端问题 1、什么是Retina 显示屏，带来了什么问题 　　retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina...、 禁止文本缩放 当移动设备横竖屏切换时，文本的大小会重新计算（或者在内嵌浏览器中设置字体的大小），进行相应的缩放，当我们不需要这种情况时，可以选择禁止： html { 　　-webkit-text-size-adjust...; ｝ 9、 如何禁止保存或拷贝图像（IOS） 通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像 或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止： img { -

    2.1K30

    Web正文字体发展简史

    这种设计可以吸引您的时间，而不是浏览文本。 虽然这种设计可以在较小的屏幕（尤其是智能手机和平板电脑，在我的测试中）上提供良好的阅读体验，但我发现在较大的屏幕上很难。...在每个注视中（可能跨越四分之一秒），他们只会看到一小部分焦点文本： 现在，如果相同的文本更大，但是其他参数（如眼屏距离）没有变化，我猜结果将如下所示： 由于聚焦区域保持不变，并且文字较大，我怀疑眼睛在每次注视上正确识别的字母会更少...这就是为什么我的假设是，对于真正的大文本（如 Resilient Web Design 250%在更大屏幕上的正文），读者将需要使用更多的注视力来阅读同一文本，并且可能会失去阅读速度并更快地感到疲劳。...然后，根据我使用的字体、我想要的外观以及我在各种设备上测试的结果，我调整这些值。 对于我们一直在追逐设备制造商，操作系统和浏览器开发人员，并试图每两年调整字体大小以适应市场上的情况，我也感到难过。...根据屏幕宽度稍微增加字体大小的概念很容易引起人们的注意。

    1.7K10

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

    在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。...那么，当我们在 CSS 中为一个元素设置属性 width: 250px; 时，会发生什么？这个元素的宽度究竟是多少像素呢？ 事实上，这里已经涉及了两种不同的像素：物理像素和 CSS 像素。...在 Apple 的视网膜屏（Retina）中，每 4 个像素为一组，渲染出普通屏幕中一个像素显示区域内的图像，从而实现更为精细的显示效果。此时， 250px 的元素跨越了 500 个物理像素的宽度。...dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。...当设置屏幕分辨率为 1920px1200px 的时候，理想视口的宽度值是 1920px， 那么 dip 的宽度值就是 1920px。

    3.1K20

    6个最好的WordPress图像优化器插件提高WordPress网站性能

    Imagify WordPress的图像优化器插件主要特点： 通过压缩WordPress图像而不损失质量来提高网站速度 压缩WordPress中的所有现有图像和新图像 压缩各种尺寸的图像，包括缩略图等...从WPRetinax2压缩Retina图像 与WooCommerce画廊兼容 与NextGenGallery兼容 调整现有图像的大小 调整新图像的大小 能够自定义Imagify插件设置 备份原始图像以恢复图像的原始版本...50张图像 图像调整大小-设置最大宽度和高度，大图像将在压缩时按比例缩小 尺寸不正确的图像检测-快速定位降低您网站速度的图像 DirectorySmush–优化图像，即使它们不在媒体库中 自动优化-异步自动压缩您的附件...Optimole WordPress的图像优化器插件主要特点： 自动优化图像 根据浏览器和访问者设备类型优化图像 支持多种图像 支持WebP和Retina图像 如果浏览器兼容性，能够提供优化的webP图像...通过设置最大宽度和/或高度来自动调整巨大的图像上传大小，以获得更合理的浏览器显示。 使用渐进式JPEG编码更快地显示JPEG图像。 选择在原始图像中保留版权元数据、创建日期和GPS位置。

    3.7K00

    前端成神之路-移动web开发_流式布局

    ：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽 总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口 2.4meta标签 ?...最标准的viewport设置 视口宽度和设备保持一致 视口的默认缩放比例1.0 不允许用户自行缩放 最大允许的缩放比例1.0 最小允许的缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比...对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题...contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 4.0 移动开发选择和技术解决方案 ####4.1移动端主流方案 1.单独制作移动端页面（主流） 通常情况下，网址域名前面加 m...transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

    2K21

    【CSS】872- 浅析rem布局方案

    说完基本概念，来说一下几个问题： retina屏图片模糊 首先普及一下位图像素：一个位图像素是图片的最小数据单元，每一个单元都包含具体的显示信息（色彩，透明度，位置等等） 那为什么在dpr高的retina...在1dpr的屏幕上，位图像素和物理像素一一对应没什么问题，但是在retina屏上，由于一个px由4个甚至更多的物理像素组成，并且单个位图像素不能进一步分割，所以会出现就近取色的情况，如果取色不均，那么就会导致图片模糊...虽然这样在dpr为1的屏幕上会导致1个物理像素上有4个位图像素，但是这种情况的取色算法更优，影响不大，不做讨论。...1px实际可能有4、9个物理像素，ui想要的其实是1个物理像素，而不是1px，不过由于不是素所有的手机都能适配0.x，所以曲线救国，采用scale缩放或者设置meta都可以 ?...一个特性 viewport有六种可以设置的常用属性： width：定义layout viewport的宽度，如果不设置，大部分情况下默认是980 height：非常用 initial-scale：可以以某个比例将页面缩放

    1K20

    移动web开发_流式布局

    ：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽 总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口 2.4meta标签 最标准的viewport...设置 视口宽度和设备保持一致 视口的默认缩放比例1.0 不允许用户自行缩放 最大允许的缩放比例1.0 最小允许的缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒...对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题...contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 4.0 移动开发选择和技术解决方案 ####4.1移动端主流方案 1.单独制作移动端页面（主流） 通常情况下，网址域名前面加 m...transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

    1.7K10

    像素终极作战指南

    PHOTOSHOP的大体法则是网页与电子设备用图永远只用考虑图像所包含的总像素数，pixel dimension(上图绿框)，需要交付印刷的文档则需要考虑文件输出尺寸(上图篮框)。...自适应宽度(responsive web design)的最大原则则是网页上所有元素都没有固定的像素尺寸，而是把屏幕总宽度设为100%，其他元素的尺寸则以百分比设置。...#3 关于iOS APP尺寸设置的基础 这里顺便提一下iOS APP的界面设置和一些UI设计师向程序员交付文档时所需要知道的常识，以保证交接的和谐平顺以及不返工，你懂的。...iPhone5我们这里暂时不讨论，因为5的ppi没有变化，兼容要做的只是类似增加首屏画面和程序上的判断。...还有一个细节问题是如何在屏幕上精确的得到iPhone的实际大小?

    97520

    零基础微信小程序开发——WXML 模板语法之列表渲染-WXML和样式设置（保姆级教程+超详细）

    background属性：用于设置元素的背景，包括背景颜色、背景图像、背景重复等。...特性 描述 定义 rpx是微信小程序中的相对长度单位 把所有设备的屏幕宽度等分为750份，即屏幕宽度为750rpx 用于解决屏幕适配问题 自适应特性 在不同设备上，1rpx代表的宽度不同，自动换算成对应的像素单位进行渲染...iPhone6作为视觉稿的标准，因为iPhone6的屏幕宽度适中，可以较好地反映小程序在不同设备上的显示效果。...布局和字体：rpx通常用于布局和字体大小的设置，因为它具有自适应特性，可以确保小程序在不同设备上的显示效果一致。...在较小的设备上，1rpx 所代表的宽度较小 在较大的设备上，1rpx 所代表的宽度较大 注意事项 Retina屏幕问题：在一些Retina屏幕的机型上，移动端上的1px可能会变粗，并不是真正1px的效果

    80210

    将你的网站打造成一个iOS Web App

    前言 iOS上的一个Web App（下图中的「念」）和Native App(原生应用)在外观上看起来基本上一样，但是其使用的技术是HTML，CSS，Javascript，而不是原生应用所使用的Objective-C...device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 其中width=device-width指的是移动浏览器所显示的宽度等于设备的物理宽度..." sizes="144x144" /> 如果你不指定size属性，那么默认为57x57，我们可以看到ipad所需icon的尺寸是72x72，retina屏幕的iphone所需的尺寸是114x114，...retina屏幕的ipad所需的尺寸是144x144。...如果没有当前设备所需尺寸的icon，那么iOS将会选用icon中所有大于此设备所需尺寸的最小的一个。如果没有比设备所需尺寸大的icon，那么选用最大的那个icon。

    2.5K60

    什么是移动端开发【重点学习系列—干货十足–一万字详解】

    屏幕分辨率 注意 几款手机的分辨率 像素相关 物理像素 / 设备像素 设备独立像素 / 设备无关像素 Retina 屏幕 几款手机的屏幕像素参数,[点击这里查看更多](https://uiiiuiii.com...普通屏幕下 1 设备独立像素 等于 1 物理像素 高清屏幕下 1 设备独立像素 等于 N 物理像素 Retina 屏幕 Retina 是苹果公司 2010 年推出的一种显示标准，是把更多的像素点压缩至一块屏幕里...位图像素是栅格图像（如：png，jpg，gif等）最小的数据单元。 位图和矢量图 位图图像是由称作像素（图片元素）的单个点组成的。放大后会失真。...== 位图像素 在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素，高清屏幕下一个 CSS 像素 等于 N 个物理像素 像素密度 屏幕上每英寸可以显示的像素点的数量，单位是 ppi...minimum-scale = 屏幕独立像素宽度 / 视觉视口 maximum-scale 设置允许用户最大缩放比例，苹果浏览器 safari 不认识该属性 maximum-scale = 屏幕独立像素宽度

    3.5K21

    【小程序_02】布局方式

    viewport宽度，可以设置device-width特殊值 hinitial-scale 初始缩放比，大于0的数字 maximum-scale 最大缩放比，大于0的数字 minimum-scale 最小缩放比...，大于0的数字 user-scalable 用户是否可以缩放，yes或no（1或0） 标准 viewport 设置 视口宽度和设备保持一致 视口的默认缩放比例1.0 不允许用户自行缩放 最大允许的缩放比例...Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。 ?...-- 单位：长度、百分比、cover、contain cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（不考虑图片是否有超出部分） contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域...注意他们要加小括号 值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 为了防止混乱

    1.9K20

    第119天：移动端：CSS像素、屏幕像素和视口的关系

    dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。...当你设置屏幕分辨率为 1920 * 1200 的时候，ideal viewport（理想视口）的宽度值是1920像素， 那么 dip 的宽度值就是1920。设备像素比是1.5（2880/1920）。...设备的逻辑像素宽度和物理像素宽度（像素分辨率）的关系满足如下公式： 逻辑像素宽度*倍率 = 物理像素宽度 而移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值，换句话说 dip 的值就是...网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip..."> 那么布局宽度width=980px，初始缩放initial-scale为自动（缩放到屏幕大小） 情况二：viewport只设置width，不设置initial-scale 那么initial-scale

    2.3K50
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券