开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让它在所有浏览器和不同的屏幕尺寸上看起来都是一样的？

要让一个网页在所有浏览器和不同的屏幕尺寸上看起来一样，可以采取以下几个步骤：

使用响应式设计（Responsive Design）：响应式设计是一种网页设计方法，通过使用CSS媒体查询和流式布局等技术，使网页能够根据不同的屏幕尺寸和设备特性自动调整布局和样式。这样可以确保网页在各种设备上都能够呈现出最佳的用户体验。
使用流式布局（Fluid Layout）：流式布局是一种相对于固定布局的设计方法，它使用相对单位（如百分比）来定义元素的宽度和位置，使得网页能够根据屏幕尺寸的变化而自动调整布局。这样可以确保网页在不同屏幕尺寸上都能够自适应地展示内容。
使用弹性图片（Flexible Images）：为了适应不同屏幕尺寸，可以使用CSS的max-width属性来限制图片的最大宽度，并将图片的高度设置为auto，这样可以确保图片在不同屏幕尺寸上能够按比例缩放，而不会失真或变形。
使用媒体查询（Media Queries）：媒体查询是CSS3的一个功能，可以根据不同的媒体类型和特性（如屏幕宽度、设备类型等）来应用不同的样式规则。通过使用媒体查询，可以为不同的屏幕尺寸和设备类型定义不同的样式，以实现在不同设备上呈现一致的外观。
进行跨浏览器测试（Cross-Browser Testing）：不同的浏览器对网页的渲染方式和支持的CSS属性有所差异，为了确保网页在所有浏览器上都能够一致显示，需要进行跨浏览器测试。可以使用一些跨浏览器测试工具或在线服务，如BrowserStack、Sauce Labs等，来模拟不同浏览器和设备上的网页显示效果，并进行调试和优化。

总结起来，要让一个网页在所有浏览器和不同的屏幕尺寸上看起来一样，需要使用响应式设计、流式布局、弹性图片、媒体查询等技术，并进行跨浏览器测试来确保一致的显示效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云Web+：提供一站式的Web应用托管服务，支持自动化部署、弹性伸缩等功能。详情请参考：https://cloud.tencent.com/product/tcb
腾讯云CDN：提供全球加速、缓存分发等功能，可加速网页内容的加载速度。详情请参考：https://cloud.tencent.com/product/cdn
腾讯云云服务器（CVM）：提供高性能、可扩展的云服务器，可满足不同规模和需求的网站部署。详情请参考：https://cloud.tencent.com/product/cvm

相关搜索:如何让我的布局在不同尺寸的屏幕上缩放？如何使用css让应用程序在不同的屏幕上看起来是一样的？如何更改不同屏幕尺寸上的tabs事件？如何支持相同的屏幕尺寸和不同的dpi？如何让不同屏幕尺寸的物品永远不会进入内部？如何在不同浏览器、不同屏幕尺寸下调整网站的缩放比例？如何根据不同的屏幕尺寸(高度和宽度)调整Subview？如何让您的网站在Linux上看起来一样如何为所有不同的屏幕尺寸自动对齐按钮和文本视图？如何以不同的屏幕尺寸排列所需输出的行和列：如何让视图显示在屏幕上的任意位置(适应不同的屏幕大小)如何确保桌子在任何尺寸的屏幕上都是正方形的。不管有多少行/列如何让自动适应所有分辨率和所有屏幕的html页面？如何让我的ReactJs应用程序在不同的屏幕上显示不同的消息？如何让不同单词的多个数组在游戏屏幕上移动？如何让Python (scipy.stats)中的直方图看起来和R一样好？如何让Json数据库在每台服务器上都是不同的？如何在CSS>中将汉堡图标锚定到不同屏幕尺寸的移动导航栏上如何在Flutter中处理不同屏幕尺寸上的定位元素(在Stack中)？我如何在图库中的缩略图之间留出空间，并且它在所有浏览器中都是相同的？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

折叠屏开发指导系列①丨屏幕兼容性解读：如何支持不同屏幕的尺寸和像素密度

这让开发者在应用程序适配中面临着不小的挑战，比如说屏幕难以完美适配，导致的UI错位以及反应迟缓等体验性问题，本文将从app设计和开发过程中给出支持不同屏幕尺寸和像素密度建议指导，确保应用界面能够在各类屏幕上美观的呈现...一应用resizeable能力支持本节概述了这些主题以及 Android 上已有的可用功能，以帮助您的应用进行相应调整。支持不同屏幕尺寸，确保您的应用界面在不同的屏幕尺寸下可以全屏的显示。...Fig在展开时可以全屏显示（图以MateX示例） Fig折叠后可以全屏显示（图以MateX示例）如上图，在应用界面能够不同的屏幕尺寸下铺满全屏显示，且响应布局和操作按键功能正常。...应用界面正确、美观的布局和显示，包含如下： 1）确保您的布局能够根据屏幕适当地调整大小 2）根据屏幕配置提供合适的UI 布局 3）确保对正确的屏幕应用正确的布局 4）提供可正常缩放的位图详细信息请参阅...开发者为每种屏幕配置优化用户体验，方法是为不同的屏幕尺寸添加专门的布局，并为常见的屏幕密度添加优化的位图图像。

1.5K4 0

详细的聊一聊如何使用响应式图片，提升网页加载速度

结果是，大多数开发者只会为所有屏幕尺寸使用同一张图片，并让浏览器调整图片的大小以适应屏幕。这是一种不好的做法，因为浏览器仍会下载完整尺寸的图片（通常非常大），即使它只以其一部分尺寸显示。...首先，我们有了您已经熟悉的普通src和alt属性，它们与所有图片一样。在极少数情况下，如果用户使用的浏览器不支持srcset，那么将使用src URL来显示图片。...对于所有屏幕尺寸，这个过程会一直持续，直到浏览器达到列表中最大的图像。这很棒，因为现在在小屏幕上，浏览器将下载一个较小的图像，而大屏幕仍将获得高分辨率的图像。...如何处理不同的像素密度有时候，您可能有一张图像在屏幕上始终保持相同的尺寸，但您希望它在高分辨率设备上看起来很好。...结论响应式图像可能看起来是一个复杂的话题，但实际上并不需要如此。实现基本的响应式图像只需在img标签中添加srcset属性，然后让浏览器完成其余工作。

5233 0

理想的viewport(视口)并不存在

如果我们从收集到的数据点中筛选出前20个独特的视口尺寸，主要都是较小的尺寸。你可能会推测这些都是移动设备——特别是前10个——但也值得考虑的是，视口尺寸也会因环境条件而有所不同。...以一个具有固定页眉和/或页脚的“像素完美”（pixel perfect）用户界面为例。当你缩小开发用浏览器的尺寸时，它可能看起来很棒，但在前面概述的条件下，它看起来如何呢？...视口是浏览器窗口的尺寸，而不是屏幕尺寸。如果你正在桌面设备上阅读这篇文章，有多少窗口占满了整个屏幕？你正在阅读的浏览器占据了多少屏幕空间？...最安全的假设是，桌面或笔记本设备上的用户不会让浏览器占满整个屏幕。...来看看所有的视口尺寸受到2015年Open Signal关于Android屏幕碎片化报告的启发，我们用砖石布局展示了前150个最常见的视口尺寸。你也可以看到所有2,300个不同的视口尺寸。

2113 0

像素终极作战指南

个像素，那么在15英寸的屏幕上，每一像素所占的屏幕尺寸一定是比较大的，那么这两个屏幕的像素密度其实是不一样的。...它必须把你文档的物理尺寸“翻译”成一个像素量，而在上边截图中我们看到了，photoshop对所有屏幕的默认像素密度都是72ppi，所以photoshop会把一个1in x 1in的文档翻译成72px x...自适应宽度(responsive web design)的最大原则则是网页上所有元素都没有固定的像素尺寸，而是把屏幕总宽度设为100%，其他元素的尺寸则以百分比设置。...还有一个细节问题是如何在屏幕上精确的得到iPhone的实际大小?...iPhone屏幕一样的尺寸了。

6172 0

什么是响应式网站？响应式网站建设解决方案

响应式网站是指网页采用响应式设计，可以根据使用者的设备自动识别屏幕宽度并调整布局，使网页在不同环境(系统平台、屏幕尺寸、屏幕定向等)均可获得较佳的浏览展示的网站。...二、响应式网站建设解决方案响应式网站建设是为不同类别的物理设备建立相同的网页（pc、平板、手机、手表等），检测到设备分辨率大小后调用相应的网页，所有的设备都是同一个页面同一个网址，所以响应式网站主要是围绕这些点进行...2、响应式规则确定不同的内容，在不同的响应式规则下的展现形式应该是不同的，即使是同样的内容，设备不一样展示形式也是有差异的，有的展示形式适合大屏幕，有的适合小屏幕，需要根据展现的内容确定好的响应式规则...(2)、要保证内容的字体字号在所有设备中都可读，尤其是在手机上，字体不可过小。 (3)、高分辨屏幕用两倍大小的图片，以让图片在高分辨率值的屏幕上看起来很锐利。...8、设备与浏览器兼容测试响应式网站建设会存在很多兼容性的问题，因此我们在做响应式站点的时候需要多设备多分辨率屏幕测试并多种浏览器进行测试，最重要的是ie、火狐、谷歌这三个浏览器测试，因为其他浏览器基本上用的都是它们的内核

1.9K4 0

两个 viewports 的故事-第二部分

移动浏览器的问题手机浏览器与桌面浏览器的最大不同就是屏幕尺寸。...平板设备如 ipad 以及传闻基于 webOs 的惠普产品将缩小桌面与手机的差距，但也无法改变最基本的问题。因为网站也需要在移动端显示，所以我们必须让它们在小屏幕上正常显示。...这使得你的网站和在桌面浏览器中显示的一样。布局视图有多宽呢？不同的浏览器各有差异。...所有浏览器都是如此，即使它们表示的值是错误的。 ? 哪一种测算对web开发者更有用？我不知道。我开始认为 device-width 是最重要的，因为它可以提供我们可能用到的设备信息。...它们会被拉伸到布局视图的 100% 宽度。大多数浏览器会通过缩小来在屏幕上显示整个布局视图，如下图的效果 ? 所有的用户会立即放大查看，但是大多数浏览器会保持元素的宽度不变，这使得文本很难阅读。 ?

1.8K7 0

【学习图片】11.描述性语法

使用 x 描述密度一个固定宽度的在任何浏览上下文中占据的视口空间相同，无论用户显示器的密度（屏幕上的物理像素数量）如何。...图像不会从高密度显示中受益 - 它在DPR为1的显示器上看起来与在DPR为2的显示器上看起来相同。...虽然更大的图像对所有用户来说都可视，但在小型低密度显示屏上渲染的巨大高分辨率图像源将看起来像任何其他小型低密度图像，但速度要慢得多。...与标记候选项具有适当尺寸以适应给定显示密度不同，w 语法描述每个候选源的固有宽度。同样，每个候选项都是相同的，除了它们的尺寸 - 相同的内容，相同的裁剪和相同的纵横比。...这张图片在所有浏览上下文中看起来都是相同的：我们的所有源文件除了尺寸之外都完全相同，每一个都会被渲染成用户的显示密度所允许的尽可能锐利的图像。

1.2K2 0

面试官：你了解过移动端适配吗？

乔布斯在iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念，在iPhone4使用的视网膜屏幕中，把2x2个像素当1个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变...1px边框问题当我们css里写的1px的时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比（dpr）去映射到设备上就为2px，或者3px，由于每个设备的屏幕尺寸不一样，就导致每个物理像素渲染出来的大小也不同...所以直接设置0.5px不同浏览器的差异比较大，并且我们看到不同系统的不同浏览器对小数点的px有不同的处理。所以如果我们把单位设置成小数的px包括宽高等，其实不太可靠，因为不同浏览器表现不一样。...“通用”方案，之所以说是通用方案,是因为他这个方案是根据设备大小去判断页面的展示空间大小即屏幕大小，然后根据屏幕大小去百分百还原设计稿，从而让人看到的效果(展示范围)是一样的，这样一来，苹果5 和苹果6p...屏幕如果你按照设计稿还原的话，字体大小实际上不一样，而人们在一样的距离上希望看到的大小其实是一样的，本质上，用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。

1.4K1 0

WebApp开发-Google官方教程

WebView中呈现的页面如果你在为Android开发Web应用或者在为移动设备重新设计一个Web应用，你需要仔细考虑在不同设备上你的页面看起来是怎样的。...在Android上运行的第三方浏览器可能并不支持这些用来控制viewport和分辨率的特性。...Android浏览器和WebView通过缩放页面来适应不同屏幕分辨率，这样所有的设备都是以默认大小即中分辨率的大小来展示web页面的。...这篇文档剩下的部分讲述了你该如何考虑这些影响并为不同类型的屏幕提供一个好的设计。使用Viewport 元数据 Viewport是指用以展现你的页面的区域。...比如，尽管一个图像在中等像素密度和高像素密度设备上看起来大小一样，但是高像素密度设备上的图像看起来更为模糊，因为这个图像本来是为320像素宽而设计的，但却被拉到了480像素宽。

9782 0

React Native基础&入门教程：初步使用Flexbox布局

图1.相同尺寸的设备不同的分辨率图上的每一个小格子，其实就代表了一个像素（pixel）。可以看到，一个像素点的大小，在这个三个物理尺寸一样但拥有不同分辨率的设备上，是不一样的。...我们想要一种长度单位，在同样物理尺寸大小的屏幕上（不论分辨率谁高谁低，只要物理尺寸大小一样即可），1个单位的长度所代表的物理尺寸是一样的。...举例来说，2dp宽，2dp高的内容，在不同分辨率但屏幕尺寸一样的设备上所显示出的物理大小是一样的。（一个题外话：有些Android开发者建议所有可点击的按钮，宽高都不应该少于48dp。） ?...只需要知道我们之所以要使用一个独立于设备分辨率的单位，主要是为了让应用在不同分辨率的设备中，看起来一致。在RN中，同样也拥有一个类似于dp的长度单位。...其实它在CSS中还处于Last Call Working Draft（最终征求意见稿）阶段，但是主流浏览器对它都有了良好的支持。

2K5 0

从零开始学 Web 之移动Web（一）屏幕相关基本知识，调试，视口，屏幕适配

一、基础知识 1、屏幕移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）。...如下图，假设你设计了一个163x163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是1x1寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.5x0.5寸大小了。...所以，我们如何处理在不同 pt/px 比例上使得显示相同大小的图片呢？很简单，在美工设计图片的时候，多设计几种尺寸的图片。...2、移动设备移动设备屏幕普遍都是比较小的，但是大部分的网站又都是为PC设备来设计的，要想让移动设备也可以正常显示网页，移动设备不得不做一些处理，通过上面的例子我们可以知道只要viewport足够大，就能保证原本为...但是由于我们手机的屏幕很小，而 viewport 的值却很大，所以页面所有的内容就会缩小以适应屏幕，所以用手机看起来，这些字体和图片就会特别小，这就像手机设置里面有个电脑版显示一样。

7902 1

从零开始学 Web 之 CSS3（八）CSS3三个案例

一、基础知识 1、屏幕移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）。...如下图，假设你设计了一个163x163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是1x1寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.5x0.5寸大小了。...所以，我们如何处理在不同 pt/px 比例上使得显示相同大小的图片呢？很简单，在美工设计图片的时候，多设计几种尺寸的图片。...2、移动设备移动设备屏幕普遍都是比较小的，但是大部分的网站又都是为PC设备来设计的，要想让移动设备也可以正常显示网页，移动设备不得不做一些处理，通过上面的例子我们可以知道只要viewport足够大，就能保证原本为...但是由于我们手机的屏幕很小，而 viewport 的值却很大，所以页面所有的内容就会缩小以适应屏幕，所以用手机看起来，这些字体和图片就会特别小，这就像手机设置里面有个电脑版显示一样。

1.3K1 0

移动 web 开发最佳实践

还有，就算两个设备尺寸一样，也会存在不一样的屏幕密度（dpi或ppi，每英寸的屏幕包含多少个像素），同样大小的字体或者宽高，放到这两个设备上，屏幕密度大的字体就会显得小。...所以说，移动端web开发面临的最大问题就是就是多屏适配，这是一个设计师、开发和测试都要面临的问题，如何做到在不同分辨率，不同屏幕密度上的手机上，同样大小的UI元素，看起来是一样大的。...下图为腾讯新闻客户端和微信内置浏览器的占位高度，在750x1334（iphone6）上他们的高度是一样的。如果你的页面高度超过1208px，页面就会出现滚动功能。...既然viewport可以自动缩放页面，那么为什么不制作固定尺寸的页面，让浏览器自己去缩放呢？开发和设计都省事了！...既然是缩放，那么就会失真，大屏设备上的字体会大一些（字体变的模糊），1px的直线看起来不一样粗。还有，设备由竖屏切换到横屏的时候，界面会变大的很多。

3K1 0

Web正文字体发展简史

英文原文：https://frontendfoc.us/link/82281/web 授权译者：ConardLi 当你正在纠结选择什么样的字体大小，尤其是在您尝试适应不同的屏幕和场景时。...由于很少有设计 Web 的经验，图形设计师和市场部门依靠 QuarkXPress 和Microsoft Word 等以前的知识。“如何将传单或杂志广告中使用的字体磅值转换为HTML 字体尺寸？”...当然，由于像素没有通用的物理尺寸，因此无法可靠地将印刷点转换为像素。屏幕具有不同的每英寸像素比。原始的 Macintosh 屏幕为 72ppi（或 68ppi ？）。...Oliver 主张将正文副本设置为浏览器的默认值或 100%，这是常规16px 浏览器中的习惯用法。在2006年，甚至几年后，这都是一个革命性的主张。网站设计师和客户认为这是极端的。...特别是硬件供应商更有兴趣销售针对视频分辨率(1080p、4K)进行优化的屏幕，即使它会让整个 UI 变得非常小。从理论上讲，浏览器制造商应该能够改变 16px 的默认字体大小以适应现代设备。

1.2K1 0

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

原文：静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。...- 前端开发）优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。...响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，...，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板...详细可参考：视区相关单位vw, vh…简介以及可实际应用场景以下优缺点参考：响应式设计和REM布局的对比（有疑问）优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

10.6K3 3

［ISUX译］iOS 9 人机界面指南(五)：图标与图形设计 - 腾讯ISUX

表格45-1所罗列出来的尺寸可以为自定义图标和图片做参考。表格45-1 ：自定义图标和图像的尺寸(像素) ? 注意：如果你需要在主屏幕快捷操作上创建自定义icon，请参考主屏幕快捷操作。...同样的icon含义却有轻微不同，还同时出现在整个系统的不同位置之中，这会让用户非常困惑。为不同设备准备不同大小的icon。你需要确保你的应用icon支持所有的设备。...和app icons一样，你可以任意命名这些小icon，因为iOS在使用的时候通常会照惯例自动选择合适尺寸的icon。对于所有的设备，请分别为Spotlight搜索结果和设置界面单独提供icon。...天气应用的启动图片 ? 如果你需要使用静态启动图片，你需要准备尺寸不同的启动画面以适应不同的设备，且所有设备上的静态启动图片都必须包含状态栏的区域。具体尺寸请查阅表格 45-1 。...想要设计一套风格协调连贯的图标，一致性是关键：尽量让每个图标都使用相同的透视和粗细相同的线条。为了保证所有的icon尺寸视觉上统一，你可能需要设计一些实际上尺寸并不相同的icon。

1.6K3 1

Refactoring UI

，设计小界面会更容易一些如果您要构建一个响应式网络应用程序，请尝试从约 400px 的画布开始，先设计移动布局一旦你有了满意的移动设计，就把它放到更大尺寸的屏幕上，调整在小屏幕上感觉不妥的地方...不要成为网格的奴隶--为你的组件提供它们所需的空间，在真正必要之前不要做出任何妥协 # 相对尺寸不能缩放一般来说，在大屏幕上较大的元素需要比已经相当小的元素收缩得更快，在小屏幕尺寸上，小元素和大元素之间的差异应该没有那么大...# 元素内部的关系事物应独立缩放的理念不仅适用于在不同屏幕尺寸下调整元素的大小，也适用于单个组件的属性 # 避免模棱两可的间距当元素组被明确分隔时--通常是通过边框或背景颜色--哪个元素属于哪个组就一目了然了...好的调色板可以分为三类灰色文本、背景、面板、表单控件--界面中几乎所有的东西都是灰色的你需要有 8-10 种色调可供选择真正的黑色看起来会很不自然，所以从深灰色开始，然后逐渐过渡到白色...，你所需要做的就是模仿现实世界中光线影响事物的方式如果你想让某个元素看起来凸起或嵌入，首先要弄清楚你想让该元素具有什么样的轮廓，然后模仿光源如何与该形状相互作用凸起部分嵌入部分 #

7643 0

5个方法对于重量级网站的图片优化

[image.png] 在不同质量水平下相同编码的图像之间的比较。图像在视觉上几乎相似但具有不同的尺寸。在不同质量水平下相同编码的图像之间的比较。图像在视觉上几乎相似但具有不同的尺寸。...使用响应式图像标签，使用img标签的srcset和sizes属性，你可以为浏览器提供单个图像的变体列表以及不同屏幕上相对图像大小的定义。...然后，浏览器根据设备尺寸和您指定的布局，从可用列表中确定要在特定设备上加载的最佳图像大小。...移动设备的另一个影响因素是设备像素比率或DPR值。现代移动电话具有高密度屏幕，在相同的平方英寸中包含更多像素。 [image.png] 在常规设备上看起来很好的图像在高密度屏幕上看起来会略微模糊。...对此的解决方案是在具有DPR 2的屏幕上加载2x尺寸的图像，在具有DPR 3的屏幕上加载3x图像并且在其他设备上加载普通图像1x尺寸的图像。这也可以使用如下所示的响应图像标签来完成。

1.6K2 0

Android的分辨率

这个文档会说明系统平台究竟提供了哪些分辨率支持特性，与它们如何在程序中使用的信息。如果你遵循文档中列出的方法，就很容易让你的程序在所有支持的分辨率下都能完美显示。...如果你已经发布过针对Android 1.5或更早版本平台的程序，你应该仔细阅读这篇文档，然后考虑一下到底如何让自己的老程序可以在拥有各种不同分辨率，并且运行着Android 1.6或更新平台上正常显示。...术语和概念屏幕尺寸屏幕的物理尺寸，以屏幕的对角线长度作为依据（比如2.8寸，3.5寸）。简而言之，Android把所有的屏幕尺寸简化为三大类：大，正常，和小。...下表列出了Android平台支持的屏幕中一些比较常用的型号，并显示了系统是如何把它们分类到不同的屏幕配置里的。有些屏幕分辨率并不在下面的列表上，但系统仍会把它们归入下列的某一个类型中。...同样分辨率,不同物理尺寸,如果按钮找像素设计,实际看起来的物理比例是一样的. 看起来物理尺寸一样,不同分辨率,分辨率大的,屏幕尺寸就要大. 看起来物理尺寸一样,不同屏幕尺寸,大尺寸的,就要像素多.

1.2K2 0

最新iOS设计规范七｜10大视觉规范（Visual Design）

其他设备（例如iPhone SE和iPad Air）具有矩形显示屏。如果您的应用在特定设备上运行，请确保该应用在该设备的所有屏幕尺寸上运行。...你可以将APP设置为动态适应各种特征，包括：不同的设备屏幕尺寸，分辨率和色域（sRGB / P3）不同的设备方向（纵向/横向）拆分视图 iPad上的多任务处理模式动态类型文本大小更改基于区域设置启用的国际化功能...例如：当垂直尺寸类型从紧凑高度变为常规高度时，可能是因为用户将设备从横向旋转到纵向，标签栏可能会变得更高。 1. 设备尺寸类型。根据屏幕尺寸，不同尺寸类别组合适用于不同设备上的全屏体验。 ? ?...图稿在不同设备显示时，请注意宽高比的差异。不同的屏幕尺寸可能具有不同的宽高比，从而导致图稿出现被裁剪，出现字母框或竖框的现象。确保在所有尺寸的显示器上都保留重要的视觉内容。...请记住，用户可能会多次阅读界面中的文本，并且最初看起来很不错的内容，可能会随着时间的推移而让用户觉得烦躁。还要记住，一种文化中的幽默不一定能代表它在其他文化中也很幽默。使用相关且一致的语言和图像。

8.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭