PPI设备上的显示大小不一样。...如下图，假设你设计了一个163x163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是1x1寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.5x0.5寸大小了。...1、PC 设备 在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。...，我们通过调整浏览器窗口可以改变 viewport 的大小，为了保证网页布局不发生错乱，需要给元素设定较大固定宽度。...在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览 器会设置一个默认大小的 viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸
免费体验 Gpt4 plus 与 AI作图神器，我们出的钱 体验地址：体验 为什么 尽管一些网页设计工具为按钮等元素指定了 CSS 高度值，但设置高度或最大高度实际上可能会违反 WCAG 2.2 Success...文档说： 如果用户代理不提供缩放功能，但允许用户更改文字大小，那么作者有责任确保在调整文字大小时内容仍然可用。...这个标准也是为什么 CSS font-size 属性使用 rem单位，而 line-height 属性不使用单位的一个原因。在没有浏览器缩放等机制的情况下，文字大小必须可以调整到 200%。...根据我的经验，随着视口尺寸的缩小，我发现这种方法更难维护。 想象一下，一个具有大文本大小设置的移动设备。使用 em 单位设置的文本容器可能会比视口宽。...如果文本被设备大小截断，这意味着我们有违反不只一个而是两个 WCAG 2.2 标准的风险： SC 1.4.4 调整文本大小 SC 1.4.10 重排 在使用技术 C28 时，防止出现这种情况的一种方法是利用
——Atwood 定律 浏览器大战 在 Android 设备或 iPhone 流行之前，浏览器大战的战场是桌面计算机平台。...如今，所有网站的全部流量有将近一半来自移动设备；但在 20 世纪 90 年代，网络上的几乎所有活动都是来自台式机的，而绝大多数台式电脑都运行着某个版本的微软 Windows 操作系统。...如果你的代码和用户在其机器上使用的 Java 版本不一样，那就自求多福吧。这意味着用户需要耐心地通过在今天看来极为缓慢的连接下载体积足有 10 MB 或更多（！）的 Java 虚拟机。...如果你想调整窗口大小或移动窗口，或打开一个新窗口，JavaScript 都能轻松实现。...我写这个包才用了差不多半小时。 JavaScript 是一种简洁而朴实无华的语言，它触及了你生活的每个角落。只要关掉浏览器的 JavaScript，就能看到有多少 Web 内容无法正常工作了。
还有，就算两个设备尺寸一样，也会存在不一样的屏幕密度（dpi或ppi，每英寸的屏幕包含多少个像素），同样大小的字体或者宽高，放到这两个设备上，屏幕密度大的字体就会显得小。...所以说，移动端web开发面临的最大问题就是就是多屏适配，这是一个设计师、开发和测试都要面临的问题，如何做到在不同分辨率，不同屏幕密度上的手机上，同样大小的UI元素，看起来是一样大的。...在移动端浏览器当中，存在着两种视口，一种是视觉视口（也就是我们说的设备大小）， 另一种是布局视口（我们要看的网页的宽度是多少）。...但也产生了一个问题，移动端的浏览器同桌面端相比，就是字体过小，但是用户可以手动缩放。后期也产生了根据调整视口宽度（width）和缩放（scale）开发移动端的页面。...既然是缩放，那么就会失真，大屏设备上的字体会大一些（字体变的模糊），1px的直线看起来不一样粗。还有，设备由竖屏切换到横屏的时候，界面会变大的很多。
如果你想知道为什么CSS这么重要，为什么Flash会逐渐淘汰，这些动画图或许能让你一窥究竟。 ? 网页设计的单色时代，约1989年。...Flash让我们创建动态网站的设计更为简便：例如，弹出窗口和在页面上动态修改内容顺序。但是相较于本地HTML，JavaScript速度很慢。 ?...这也是Froont飞出页面和开场动画等的黄金时代。但是，Flash会占用计算机大量的处理资源，这也使得它成为一种特别不友好的技术，尤其是对于移动设备例如笔记本电脑和智能手机而言。 ?...2010年，对于如何在移动设备显示网页的问题，Ethan Marcotte想到了另一种解决方案：响应式设计。 ? 在响应性设计之后，一种撇去华丽效果重视内容的扁平化设计也出来了。...以后，设计人员将不需要再担心浏览器的兼容性问题，各种适用于任何设备的工具也都随手可得。以后的技术将不会再成为设计的限制，设计师可以集中精力解决UI和UX问题，而不是把时间浪费在排除故障上。
2、设计方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建立移动网站，单独设计一个布局...——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。..." content="no-transform "> 总结： 响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的...，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示...important; } } 其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。
尽管移动端网页与桌面端网页有诸多差异，但是说到底它还是一个在浏览器里浏览的HTML网页，所以最常用的还是在桌面借助Chrome调试器。...Chrome自带的Developer Tool对于调试移动端网页来说非常方便，可以通过调整下表所示的几个属性来调整页面。...使用IOS Safari + Mac OS Safari配合调试 这个方法对用MAC来办公的伙伴就比较友好了～ Apple允许开发者通过数据线连接的方式，在Mac OS的Safari里面调试iOS设备上的网页...优点：可以完全在真机设备上调试网页，无论是HTML和CSS，还是脚本和请求，都和在桌面浏览器一样，最重要的是当前调试的是在真实环境下的页面。...当看到优点是不是很激动，在真机上可以调试iOS和Android设备的网页耶✌️ 使用vConsole调试 由腾讯出品的vConsole调试工具，在调试移动端的时候非常有效，而且其使用方法也是简单。
元素，窗口以及屏幕。...我们将在本页讨论移动浏览器。如果你是刚刚接触移动端，我建议你首先阅读关于桌面浏览器的第一部分。这会让你在熟悉的环境中循序渐进。...平板设备如 ipad 以及传闻基于 webOs 的惠普产品将缩小桌面与手机的差距，但也无法改变最基本的问题。因为网站也需要在移动端显示，所以我们必须让它们在小屏幕上正常显示。...所有浏览器都是如此，即使它们表示的值是错误的。 ? 哪一种测算对web开发者更有用？我不知道。 我开始认为 device-width 是最重要的，因为它可以提供我们可能用到的设备信息。...也许是，有线索表示浏览器厂商认为这一数值对于设备上的网站是友好的宽度。但仍然有些含糊不清 width 的媒体查询没有提供更多的其他信息。 因此我仍然不确定。
要知道我们显示器的物理像素为1280 当浏览器窗口放大两倍时，视口宽度变成了640 与物理像素正好是2倍的关系 此时得出结论“ 1CSS像素等于2个物理像素”，这里只是一个单向关系，实际上应该是4个物理像素显示...这是为了让pc端的网页也能在移动端完整展示 如果pc端网页超过了980px那么移动端浏览器会对网页进行缩放以正常显示 通过结合上面的规律我们得出，视口小于物理像素时，页面展示的元素会放大，视口大于物理像素时元素会缩小...这就是pc端网页没有做移动端适配的情况下，在移动端看上去会非常的小，我们要通过缩放才能正常浏览网页，当然这个体验并不是很好 这也就是我们常说的布局视口 完美视口（理想视口） 默认情况下 移动端的像素比为...980/移动端宽度 布局视口带来的问题是 如果我们直接在网页中编写移动端代码，在980的视口下像素比是非常不友好的 也就是 1px =0.几物理像素，这样就会导致网页中的内容非常非常小 因此在编写移动端页面时...name="viewport" content="375"> 这就是我们的完美视口，移动端有一个最佳的像素比 但是我们不能将像素比写死每个设备的像素比都可能不一样，因此一个完美的视口应该是这样
单独制作移动端页面优点 可以充分考虑到平台的优势和局限性 创建良好的用户体验设计 网页在移动设备上加载更快 单独制作移动端页面缺点 移动端网站会产生多个URL（PC端一套URL，移动端一套URL） 维护成本会增加...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 布局视口 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...当移动端浏览器展示 PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...视觉视口 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。 理想视口 理想视口是指对设备来讲最理想的视口尺寸。...在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640×480），则屏幕上显示的像素少，单个像素点比较大，看起来会有种颗粒感。
单独制作移动端页面优点 可以充分考虑到平台的优势和局限性 创建良好的用户体验设计 网页在移动设备上加载更快 单独制作移动端页面缺点 移动端网站会产生多个URL（PC端一套URL，移动端一套URL） 维护成本会增加...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 布局视口 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...视觉视口 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。...在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640×480），则屏幕上显示的像素少，单个像素点比较大，看起来会有种颗粒感。
其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生 1、为什么要移动端适配？...1px边框问题 当我们css里写的1px的时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比（dpr）去映射到设备上就为2px，或者3px，由于每个设备的屏幕尺寸不一样，就导致每个物理像素渲染出来的大小也不同...在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分。 那么在移动端如何配置视口呢？ 简单的一个meta标签即可！...这个方案只是个过渡方案，为什么说是过渡方案 因为当年viewport在低版本安卓设备上还有兼容问题，而vw，vh还没能实现所有浏览器兼容，所以flexible方案用rem来模拟vmin来实现在不同设备等比缩放的...屏幕如果你按照设计稿还原的话，字体大小实际上不一样，而人们在一样的距离上希望看到的大小其实是一样的，本质上，用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。
HTML页面在手机端显示的存在问题 HTML页面在电脑的浏览器显示跟在手机端的浏览器显示效果是不一样的，下面写个div来示例看看。 首先编写一个div ? 那么下面来切换手机显示看看。...视口 视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况...，移动端会将视口缩放到移动端窗口的大小。...这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。...图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css
移动端web开发基本上分为三种： 移动端网页开发 传统的页面开发，可以参考手机腾讯网。...layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的，在PC端就是等于窗口大小，但在移动端不同浏览器的值不同，比如Safari...它的作用是调整layout viewport的宽度（或者其他，参见文档），那么这里解释一下为什么ppk大神认为移动端上实际还有另一个viewport叫做ideal viewport。...当浏览器窗口缩小时，内容会被剪掉，实际上由于viewport的原因，这种固定大小的页面在移动端的展示也是很不友好的。...%（流式布局） 流式布局实际上就是百分比宽度 + 固定高度，当前国内百度的移动端页面就是这么做的。当浏览器宽度缩小，容器也跟着缩小，当设备屏幕较小时，体验也会好一点。
本文作者：IMWeb 何璇 原文出处：IMWeb社区 未经同意，禁止转载 移动端web开发基本上分为三种： 移动端网页开发 传统的页面开发，可以参考手机腾讯网。...layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的，在PC端就是等于窗口大小，但在移动端不同浏览器的值不同，比如Safari...它的作用是调整layout viewport的宽度（或者其他，参见文档），那么这里解释一下为什么ppk大神认为移动端上实际还有另一个viewport叫做ideal viewport。...当浏览器窗口缩小时，内容会被剪掉，实际上由于viewport的原因，这种固定大小的页面在移动端的展示也是很不友好的。...%（流式布局） 流式布局实际上就是百分比宽度 + 固定高度，当前国内百度的移动端页面就是这么做的。当浏览器宽度缩小，容器也跟着缩小，当设备屏幕较小时，体验也会好一点。
通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。...# 移动优先 开发移动版网页有很多限制：屏幕空间受限、网络更慢。用户跟网页交互的方式也不一样：可以打字，但是用着很别扭，不能将鼠标移动到元素上触发效果等。...除了前面提到的交互菜单，移动版设计主要关注的是内容。在大屏上，可以把页面的大块区域拿来做头部、主图、和菜单。然而在移动设备上，用户通常有更明确的目标。 移动版设计就是内容的设计。...https://codepen.io/cellinlab/pen/GRyXmjx 通过缩放浏览器窗口就能测试标题样式。当窗口很窄的时候，标题是适应移动端的小字号。...慢慢放大浏览器窗口，字号会平滑地改变，因为网页被设置了响应式（calc()）字号。只要网页宽度达到 35em（或者 560px），标题的字号马上就会变成 2.25rem。
这在台式机上很烦人，但在移动设备上却很致命） 注意：测量的宽度和高度包括滚动条。它们也被视为内部窗口的一部分，这主要是出于历史原因。...视口viewport问题引出 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport...又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。...我们用下面的图来说说 移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），这里是980px。这个是CSS像素。...缩小之后一个物理像素现在重叠了2.61*2.61≈6.8个CSS像素，强行缩小显示在移动端，看起来会太小，体验很不友好。
大家好，又见面了，我是你们的朋友全栈君 固定布局 为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。 ...通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的展示效果，一般情况下是检测设备屏幕的宽度来实现。...在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。但媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。...弹性布局（rem/em布局） 弹性布局跟流布局很像，网页宽度不固定，使用 em 或 rem 单位进行相对布局，避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示...但弹性布局也有局限性，如果不对这种布局设置一个最小宽度，当用户缩小窗口到足够小时会造成布局严重错位。
你是不是也遇到过这样的问题：在制作一些网页小游戏、炫酷的网页动画或者数据可视化时，想让画布（Canvas）全屏显示，让用户的体验更加沉浸？...比如，你正在制作一个小型的网页打砖块游戏，想要让游戏画布覆盖整个浏览器窗口，这样用户体验会更好，也更符合现代网页游戏的需求。...而且，用户调整窗口大小时，画布也要跟着变化。...除了游戏，像是一些数据可视化的仪表盘、互动性强的动画网页等，都可以用到这种全屏Canvas的效果。比如一个全屏的数据图表，随着窗口大小的调整，图表的内容也自动跟随变化，不会让用户觉得布局混乱。...多设备适配：在移动设备上，全屏Canvas也是不错的选择，但注意可能会遇到软键盘弹出或者横竖屏切换的情况，需要额外处理这些变化。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
