天道酬勤,学无止境

Retina 显示器和 1080p 手机等高 DPI 设备如何处理媒体查询中的像素?(How do high-DPI devices like Retina displays and 1080p phones handle pixels in media queries?)

问题

例如,带有 Retina 显示屏的 iPhone 在媒体查询中显示多少像素? 是 320 像素还是 640 像素? 如果是 640 像素,网站如何处理不同的设备分辨率? 无论屏幕分辨率如何,有没有办法使用相同的单位?

回答1

像 iPhone 和 iPad 这样的 Retina 设备通常使用 2 个设备像素 = 1 个 CSS 像素。 所以像这样的媒体查询:

@media all and (max-width: 320px) {
}

实际上将针对 iPhone(纵向),即使它是 640 设备像素宽。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 在响应式设计方面,您如何处理高分辨率手机,例如 Galaxy S4?(In terms of responsive design, how do you handle high resolution phones, such as the Galaxy S4?)
    问题 过去,您会使用基于像素宽度的媒体查询来确定最终用户将获得什么显示。 但是,当您使用更高分辨率的设备(例如 Galaxy S4 (1080x1920) 分辨率)时,这不起作用/不会起作用。 你怎么处理这个? 回答1 是什么让您认为媒体查询不起作用? 显然,Galaxy S4 的 CSS 像素比是 3.0,因此,虽然它的物理分辨率是 1080x1920,但它的 CSS 分辨率仍然是 360x640——类似于 Galaxy S3。 还有用于测试像素密度的媒体查询。 它们可以帮助您为高分辨率设备提供高分辨率图片或矢量图形。 http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density#Samsung http://bjango.com/articles/min-device-pixel-ratio/ 另外,看看这篇文章: http://www.html5rocks.com/en/mobile/high-dpi/ 很棒的屏幕规格数据库 http://screensiz.es/phone 回答2 不确定您用于响应式设计的框架,但是使用 Bootstrap 我将它添加到<head>并且它对我有用: <meta name="viewport" content="width=device-width, initial-scale
  • CSS中的像素密度,视网膜显示和字体大小(Pixel density, retina display and font-size in CSS)
    问题 我自己没有Retina MacBook来测试这些东西,并且互联网上关于高像素密度显示器上的网页设计似乎有很多困惑。 现在,我假定具有Retina显示屏的MacBook上的WebKit会将页面缩放到其大小的两倍左右,因为大多数网页都不是为了适应更高的像素密度而构建的? 在我看来,设计这些显示器或实际上任何类型的显示器的理想情况是使用ems代替像素,就像您可以做的那样。 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { body { font-size: 150%; } } @media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) { body { font-size: 200%; } } 并且整个页面将相应地缩放。 还是会吗? 在Retina MacBooks上运行的浏览器上的默认字体大小是否仍为16px或更高? 因为如果更高,则缩放效果将成倍增加。 我想我的问题是; 如果我始终使用em,那么我唯一需要做的就是更改每个设备像素比率的字体大小? 回答1 好的
  • iPhone / Android浏览器是否支持CSS @media掌上电脑?(Do iPhone / Android browsers support CSS @media handheld?)
    问题 我想为运行在手机(例如iPhone和Android)上的网络浏览器更改网页CSS。 我已经在CSS文件中尝试过类似的操作: @media handheld { body { color: red; } } 但这似乎没有任何作用,至少在iPhone上没有。 如何编写CSS以在iPhone等上以不同方式工作,理想情况下不使用javascript? 回答1 您可以使用@media查询: <link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/> 此特定版本将定位到iPhone(以及其他任何具有max-device-width 480px屏幕的max-device-width 。 苹果公司(用于iPhone)虽然是从内存中提取的,所以我不能完全确定它的准确性,但选择不使用handheld或mobile样式表,因为它和其他iOS设备能够或多或少地呈现css通过Safari与台式机浏览器相提并论。 对于其他设备,我不确定它们到底有多忠实,尽管“ A List Apart”一文(上面有链接)对其中一些进行了简要介绍。 编辑响应意见,从@Colen: 嗯,看起来很多新的移动设备都具有更高的分辨率(例如droid X为854x480)。
  • 我可以对Chrome中“ overflow:scroll” div上的“滚动重绘”警告做任何处理(Can I do anything about “repaints on scroll” warning in Chrome for “overflow:scroll” div)
    问题 在Chrome DevTools中的“渲染”下,有一个选项“显示潜在的滚动瓶颈”。 启用此功能后,我在屏幕上出现的一些div元素都带有overflow:scroll ,在顶部显示一个标志,上面写着“滚动时重新绘制”。 我找不到有关此功能的大量文档,并且我不知道它是否是我可以实际修复或改进的东西,或者仅仅是事实说明-div有内容,并且确实可以滚动。 回答1 您可以在带有div上应用此CSS overflow: scroll或overflow: auto ,以创建滚动瓶颈。 transform: translateZ(0); -webkit-transform: translateZ(0); 这将迫使浏览器创建一个新图层来绘制此元素,并且有时会解决滚动瓶颈(尤其是Webkit)。 回答2 尽管已接受的答案解决了问题,但值得一看的是CSS will-change属性。 这比transform: translateZ(0);更可取transform: translateZ(0); 近来。 这是一篇文章,详细说明了不同之处-https://dev.opera.com/articles/css-will-change-property/ .scroll-container { will-change: transform; } 回答3 令人惊讶的是,这花了我几天时间来跟踪发生的事情
  • 媒体查询:如何定位台式机,平板电脑和移动设备?(Media Queries: How to target desktop, tablet, and mobile?)
    问题 我一直在做一些关于媒体查询的研究,但我仍然不太了解如何定位某些尺寸的设备。 我希望能够定位台式机,平板电脑和移动设备。 我知道会有一些差异,但是拥有可用于定位这些设备的通用系统会很好。 我发现了一些例子: # Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desktop only screen and (min-width: 992px) # Huge only screen and (min-width: 1280px) 或者: # Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop only screen and (min-width:769px) 每个设备的断点应该是什么? 回答1 IMO这些是最好的断点: @media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ } @media (min-width:480px) { /*
  • 对比:iPhone 11 Pro vs iPhone 12 Pro vs iPhone 12 Pro Max
    2020年全新的iPhone产品阵容,其中包括iPhone 12 Pro和12 Pro Max,以及更小,更便宜的iPhone 12 mini和iPhone 12选项。现在,我们将重点介绍旗舰机型。 在这篇文章中,我们将通过比较每款手机的技术规格,帮助已经拥有去年iPhone 11 Pro的用户决定是否应该升级到今年的iPhone 12 Pro或12 Pro Max。 比较:iPhone 11 Pro,iPhone 12 Pro和iPhone 12 Pro Max 请记住,除了显示尺寸和电池容量外,去年的iPhone 11 Pro和11 Pro Max手机几乎完全相同,我们仅将iPhone 11 Pro作为2019年旗舰手机的黄金标准,以减少您输入的文本量否则会被迫通读。值得注意的是,iPhone 12 Pro和12 Pro Max之间存在一些关键差异,我们将在此处向您介绍。 外观 iPhone 11 Pro和iPhone 11 Pro Max:午夜绿色,银色,金色或深空灰色 iPhone 12 Pro和iPhone 12 Pro Max:太平洋蓝,银,金或石墨 尺寸和重量 iPhone 11 Pro: 144毫米(5.67英寸)×71.4毫米(2.81英寸)×8.12毫米(0.32英寸),重6.63盎司(188克) iPhone 11 Pro Max: 6.22英寸(158
  • 我应该在CSS中使用px或rem值单位吗? [关闭](Should I use px or rem value units in my CSS? [closed])
    问题 关门了。 这个问题是基于意见的。 它当前不接受答案。 想要改善这个问题吗? 更新问题,以便可以通过编辑此帖子以事实和引用的形式回答。 11个月前关闭。 改善这个问题 我正在设计一个新网站,希望它与尽可能多的浏览器和浏览器设置兼容。 我正在尝试确定应使用哪种度量单位来显示字体和元素的大小,但无法找到一个确定的答案。 我的问题是:我应该在CSS中使用px还是rem ? 到目前为止,我知道使用px与在浏览器中调整基本字体大小的用户不兼容。 我无视em的原因是,与rem相比,它们串联起来更麻烦。 有人说rem与分辨率无关,因此更可取。 但是其他人则说,大多数现代浏览器无论如何都会对所有元素进行均等缩放,因此使用px并不是问题。 我之所以这样问是因为,对于CSS中最理想的距离度量有很多不同的看法,而且我不确定哪个是最好的。 回答1 TL; DR:使用px 。 事实 首先,了解每个规范CSS px单位不等于一个物理显示像素非常重要。 这一直是正确的-即使在1996 CSS 1规范中也是如此。 CSS定义了参考像素,该像素测量96 dpi显示器上像素的大小。 在dpi基本上不同于96dpi的显示器上(例如Retina显示器),用户代理会重新缩放px单位,以使其尺寸与参考像素的尺寸匹配。 换句话说,这种重新缩放正是为什么1个CSS像素等于2个物理视网膜显示像素的原因。 也就是说
  • 十大经典系统架构设计面试题
    翻译自:https://medium.com/geekculture/top-10-system-design-interview-questions-10f7b5ea123d在我作为微软和Facebook的高级软件工程师和面试官的10年时间里,我曾与数百名应聘者一起工作,帮助他们解决不同的系统设计问题。开发人员往往会在系统设计面试问题上挣扎,因为它们是开放式的,通常需要一种批判性思维,而在其他编码面试挑战中没有实践过。虽然系统设计面试问题会随着时间的推移而变化,但有些问题在各大顶级公司的面试中仍然很受欢迎。今天,我们将探讨10个最常见的系统设计面试问题,你必须在每个问题中解决的常见问题,以及一些帮助你做到这一点的工具。以下是我们今天要讲的内容::回答任何问题的技巧设计一个聊天服务设计拼车服务设计一个URL缩短服务设计一个社交媒体服务设计一个社交留言板设计文件存储服务设计一个视频流媒体服务设计一个API速率限制器设计一个邻近服务器设计一个预输入服务接下来该学什么?任何系统设计面试问题的提示通过陈述你所知道的来开始每个问题:列出系统所需的所有特征,你期望在这类系统中遇到的常见问题,以及你期望系统处理的流量。列出清单的过程可以让面试官看到你的计划技巧,并在你开始解决问题之前纠正任何可能的误解。叙述任何权衡:每个系统设计选择都很重要。在每个决定点,列出至少一个积极和消极的选择的影响
  • 视网膜显示屏,高分辨率背景图像(Retina displays, high-res background images)
    问题 这听起来像是一个愚蠢的问题。 如果我将此CSS代码段用于常规显示(其中box-bg.png为200px x 200px); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } 如果我使用像这样的媒体查询来定位视网膜显示器(@ 2x图像为高分辨率版本); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{background:url('images/box-bg@2x.png') no-repeat top left;} } 我是否需要将.box div的大小.box至400px x 400px,以匹配新的高分辨率背景图像? 回答1 我是否需要将.box div的大小增加一倍至400px x 400px,以匹配新的高分辨率背景图像 否,但是您需要设置background-size属性以匹配原始尺寸: @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{ background:url('images/box-bg@2x.png') no-repeat
  • 如何在没有实际Retina显示屏的情况下在Windows上测试Retina网站?(How to test a website for Retina on Windows without an actual Retina display?)
    问题 有没有一种方法可以在Windows上模拟Retina显示屏来测试HiDPI显示屏(例如Retina)的网站? 我在标准的24英寸1920x1080显示器上运行Windows。超级清晰明了,由于直接比较,徽标显得更糟。 我已按照本教程进行操作,以使我的网站Retina做好准备: http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs 由于没有任何背景图片,因此我使用了retina.js方法。 我有什么办法可以测试它是否真的有效? 显然,我可以要求我的朋友使用他的Retina笔记本,但这对我来说不是一个可行的工作流程。 我希望能够至少在我自己的环境中大致测试网站与Retina的兼容性。 回答1 关于:在Firefox上配置hack 您实际上可以使用Firefox: 转到“关于:配置” 找到“ layout.css.devPixelsPerPx 将其更改为所需的比率(正常时为1,视网膜时为2,以此类推。-1似乎是默认值。) 截屏: 刷新页面-繁荣发展,您的媒体查询现已开始! 向Firefox致敬,因为它们对Web开发具有出色的表现! 抬头,不仅网站现在将扩大到两倍大小,而且Firefox UI也将增加一倍。 必须加倍或缩放,因为这是您能够检查标准像素比率屏幕上所有像素的唯一方法。
  • 将高分辨率图像提供给视网膜显示(Serving high res images to retina display)
    问题 如何以跨浏览器兼容的方式检测访问网页的设备的像素密度,从而使用户可以提供标准或高分辨率图像,而无需将任何图像倍增到任何设备上? 有没有可以自动执行此操作的JavaScript库? 回答1 为什么要设置视网膜 iPhone 4s,iPhone 5,iPad3,iPad4,Macbook 15英寸,Macbook 13英寸均使用Retina显示屏。 Android还支持高分辨率显示,以及@JamWaffles提到的Windows 8(Lumia 920)。 添加高分辨率支持有助于提高用户体验,但无疑会增加开发人员的负担以及移动设备的带宽。 有人不建议这样做。(Peter-Paul Koch,请参阅底部的“更多阅读内容”) 短语 有两种方法可以实现此功能。 一个是Javascript,另一个是CSS。 当前所有的解决方案都适用于Retina,但可以轻松扩展到Android高分辨率。 CSS解决方案是关于Media Query和-webkit-min-device-pixel-ratio或-webkit-device-pixel-ratio 易于使用。 适用于所有浏览器。 缺点:适合背景。 <img>标签更难 Javascript解决方案与window.devicePixelRatio属性有关。 优点:Javascript可以操纵图像源。 因此,如果您要提供直接图片而不是背景图片
  • Bootstrap 3断点和媒体查询(Bootstrap 3 breakpoints and media queries)
    问题 在Bootstrap 3媒体查询文档中,该文档显示: 我们在Less文件中使用以下媒体查询在网格系统中创建关键断点。 超小型设备(电话,小于768像素):无媒体查询,因为这是Bootstrap中的默认设置小型设备(平板电脑,768像素及以上) @media (min-width: @screen-sm-min) { ... } 中型设备(台式机,992px及以上) @media (min-width: @screen-md-min) { ... } media @media (min-width: @screen-md-min) { ... } 大型设备(大型台式机,1200px及以上) @media (min-width: @screen-lg-min) { ... } media @media (min-width: @screen-lg-min) { ... } 我们是否应该能够在媒体查询中使用@screen-sm , @screen-md和@screen-lg名称? 因为它对我不起作用。 我必须先使用@media (min-width: 768px) {...}类的像素测量,然后才能起作用。 难道我做错了什么? 另外,对于超小型设备的480px的引用是否是错字? 那不应该说到767px吗? (因为已从文档中删除) 回答1 Bootstrap 4媒体查询 //
  • 使用JavaScript在设备上检测视网膜支持的最佳方法是什么?(What is the best way to detect retina support on a device using JavaScript?)
    问题 现在我正在使用此功能: function is_retina_device() { return window.devicePixelRatio > 1; } 但是它的简单让我感到恐惧。 有更彻底的检查吗? 回答1 根据我最近阅读的所有内容,浏览器似乎正朝着resolution媒体查询表达式的方向发展。 这代替了当前接受的答案中使用的device-pixel-ratio 。 device-pixel-ratio仅应用作备用的原因是因为它不是标准的媒体查询。 根据w3.org: 从前,Webkit决定需要针对屏幕分辨率的媒体查询。 但是他们没有使用已经标准化的分辨率媒体查询,而是发明了-webkit-device-pixel-ratio。 查看全文 分辨率媒体查询文档 由于resolution是标准化的,因此是将来的标准,因此我们首先将其用于检测中以进行将来的证明。 另外,由于我不确定您是要检测仅高dppx设备还是仅检测视网膜(仅Apple)设备,因此我添加了每个设备。 最后,请注意,Apple检测只是用户代理嗅探,因此不能依赖。 注意:对于isRetina函数,我使用的是2而不是1.3的dppx,因为所有视网膜apple设备都具有2dppx。 请注意,MS Edge似乎存在一些非整数值问题 function isHighDensity(){ return ((window
  • 如何处理我的Webapp中的时区?(How can I handle time zones in my webapp?)
    问题 我希望更好地了解以下用户故事: 约翰在悉尼工作。 早上9:00,他将事件记录在运行在苏黎世服务器上的Web应用程序中。 第二天,他前往纽约召开紧急会议,应对该事件进行讨论。 在会议期间,他按日期和时间搜索事件。 如我所见,这里至少存在两个问题: 如何将时间戳保存在数据库中我应该如何在用户界面中显示它们 当约翰搜索事件时,他会知道事件发生在9:00,但是他应该在网络浏览器中输入什么? 当他仅输入“ 9:00”作为时间戳时,他什么也找不到,因为那可能是苏黎世或纽约时间(由于未找到该事件,因此该应用无法知道它发生在悉尼,所以它无法自动选择正确的时区)。 向用户询问可能包含时区的时间戳的好方法是什么? 第二个问题是如何显示结果。 如果来自全球的团队需要讨论事件(并查找相关事件,请考虑一次针对全球多个站点的黑客攻击)。 显示在不同时区创建的时间戳的一个很好的例子是什么? 注意:请专注于需求的可用性。 我可以自己弄清楚数据库映射。 目前,我不确定工作流程。 它应该以非介入/直觉的方式询问/提供必要的信息。 如果可以,请提供一个已解决此问题的现有Web应用程序的链接。 回答1 存储时间戳的问题很简单:将它们存储在UTC中。 至于显示它们,将设备的时区设置用作当前时区是很有意义的。 也就是说,“时间输入”框旁边应该有一个时区下拉列表,默认为设备的当前时区,因此用户可以根据需要进行更改。
  • iOS 6应用-如何处理iPhone 5屏幕尺寸? [复制](iOS 6 apps - how to deal with iPhone 5 screen size? [duplicate])
    问题 这个问题已经在这里有了答案: 8年前关闭。 可能重复: 如何为iPhone 5屏幕分辨率开发或迁移应用程序? 我只是想知道我们应该如何处理更大尺寸的iPhone 5屏幕。 随着高度的增加,像GCRectMake这样使用坐标的东西(由于视网膜/非视网膜问题使像素增加了一倍)将无法在版本之间无缝地工作,就像我们获得视网膜时那样。 就像iPad一样,我们是否需要设计两个情节提要? 我个人不认为Apple会在每次需要绘制某些东西时都要求您检查屏幕尺寸,就像许多答案所说的那样。 iPad会发生这种情况吗? 回答1 根据我在今天的演讲中所讲的,所有应用程序都将继续在垂直拉伸的屏幕上运行。 它们将被加信箱,或者基本上多余的88个高度将完全是黑色的。 如果您仅打算支持iOS 6+,那么绝对可以考虑使用“自动布局”。 它删除了所有固定的布局处理,而是使用约束对内容进行布局。 一切都不会被硬编码,您的生活将变得更加简单。 但是,如果您必须支持较旧的iOS,则实际上取决于您的应用程序。 使用标准导航栏和/或选项卡栏的大多数应用程序都可以简单地在中间扩展内容,以用完这些多余的点。 设置中心内容的自动调整大小蒙版以在两个方向上扩展。 view.autoresizingMask = UIViewAutoresizingFlexibleWidth |
  • 如何编写针对所有移动设备和平板电脑的CSS媒体查询的代码?(How to code CSS media queries targeting ALL mobile devices and tablets?)
    问题 @media only screen and (max-device-width : 640px) { /* Styles */ } @media only screen and (max-device-width: 768px) { /* Styles */ } 到目前为止,这就是我所拥有的。 我正在使用的移动网站的PSD样机宽度为640像素。 另一个是网站的平板电脑版本,为768像素。 我仅通过使用max-width就可以在Web浏览器中测试该站点,但是现在是时候让该站点在设备上正常工作了,它仍然可以呈现常规的全尺寸网页。 以上两个查询是我的最佳猜测。 我要去哪里错了? 回答1 这可以通过4级媒体查询来完成:(浏览器支持非常好-CaniUse) 互动媒体功能 这里的想法是基于设备的功能来定位它们。 (据称,检查倾向于移动目标的设备的尺寸或分辨率) 指针媒体功能查询设备使用的指针机制的质量。 悬停媒体功能会查询用户使用给定设备将其悬停在页面上的元素上的能力。 所以要回答这个问题... 移动设备/表的相似之处在于: 1)设备的主要输入机制的准确性受到限制。 这意味着我们可以使用以下媒体查询: @media (pointer:coarse) { /* custom css for "touch targets" */ } div { width: 400px; height
  • 在Android上的Chrome中获取物理屏幕尺寸/ dpi /像素密度(Getting the physical screen dimensions / dpi / pixel density in Chrome on Android)
    问题 问题 在Android上的Chrome中,有没有一种安全的方法来获取实际正确的屏幕物理尺寸? 如有必要,可以将旧版本的Chrome和Android排除在外。 先前的研究 关于从Javascript(或CSS)中获取设备的实际物理屏幕尺寸的问题,stackoverflow有很多死胡同的问题。 似乎html api标准化与实际的浏览器实现之间没有融合,更不用说浏览器实现依赖于OS api,而OS api则依赖于提供正确信息的硬件。 顺便说一下,在假定当时盛行的某个像素密度的情况下,有些先验答案是奥秘的(2011年等),因此毫无用处。 其他与webkit有关,而Chrome闪烁可能已取代了Chrome(?)中的webkit。 我想通过将事物限制为仅适用于Android上的Chrome来探索简单解决方案的存在。 笔记 这全都与浏览器内部的javascript(或css)解决方案有关,而不是针对本机应用程序的解决方案。 回答1 您无法真正获得实际的物理尺寸或实际的DPI,即使可以,也无法对它们进行任何操作。 这是一个漫长而复杂的故事,请原谅。 网络和所有浏览器都将1px定义为一个称为CSS像素的单位。 CSS像素不是真实像素,而是根据设备的视角被认为是英寸的1/96英寸的单位。 这被指定为参考像素。 参考像素是设备上一个像素的可视角度,像素密度为96dpi,距阅读器的距离为臂长。 因此
  • 为不同的 Android 屏幕尺寸/密度缩放 Phonegap 应用程序?(Scaling a Phonegap app for different Android screen sizes/densities?)
    问题 我有一个设计用于在 Android 手机和平板电脑上运行的 Phonegap 应用程序。 文本和图像的比例在手机上看起来不错,但在 7 英寸平板电脑上太小了。 有没有办法设置适用于基于 Phonegap 的应用程序的不同屏幕尺寸/密度的比例? 对于原生 Android 应用程序,多屏幕布局(如 android 文档中所述)将是一种解决方案,但这可以用于基于 Phonegap 的应用程序吗? 我可以使用 CSS 媒体查询根据屏幕大小设置字体大小,但我想按比例缩放整个界面(包括图像)。 我尝试使用 CSS zoom属性和媒体查询来定位特定的屏幕尺寸,但这会破坏绝对定位并干扰 UI 元素(如 iScroll)的功能: @media only screen and (min-device-width : 768px) { body{ zoom: 125%; } } @media only screen and (min-device-width : 1024px){ body{ zoom: 150%; } } 我还尝试使用targetdensity-dpi元视口属性 - 将其调整为 120dpi 可使比例在 7 英寸平板电脑上更好,但在手机上太大。 由于这是在 HTML 而非 CSS 中硬编码的,因此媒体查询不能用于根据屏幕大小来改变它: <meta name="viewport"
  • 手机和台式机屏幕尺寸统计(Mobile and desktop screen size statistics)
    问题 在哪里可以找到有关移动和台式机屏幕尺寸的统计信息? 我正在制作一个响应式网站,尤其是我试图找出的是天气,这是大多数手机与台式机和平板电脑用户之间的一个巨大差距,我可以在其中做一个断点。 我认为应该存在,但知道我应该检验我的假设。 因此,为了清楚起见,我希望手机具有一套样式,而平板电脑和台式机则具有另一种样式。 谢谢 回答1 我刚刚完成了一个响应式企业网站(https://plus.google.com/101258044853419629282/posts/GejAf734nP6),这是我可以告诉您的-断点绝对不是600px! 以下是事实(就CSS和@media查询而言): 1366像素的桌面宽度刚刚超过1024像素,这是最受欢迎的尺寸:http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-现在1366x768 / 尽管如此,在平板电脑上,其1024x768px的iPad还是最受欢迎的。 iOS Safari健全,并且始终报告正确的视口,即。 无论您使用的是普通iPad还是Retina iPad,它都会告诉您它是1024x768,类似地,iPhone也会告诉您它是320x480。 Android浏览器存在更多问题
  • 前端面试之移动端适配篇
    文章目录 关于像素,括号中为别名设备像素(物理像素)设备无关像素(设备独立像素)设备无关像素与CSS像素之间的关系 —— 页面缩放比设备像素与设备无关像素之间的关系 —— DPR设备像素与CSS像素之间的关系获取DPR的方法 关于视口布局视口(layout viewport)js获取 视觉视口(visual viewport)js获取 理想视口(ideal viewport)js获取设置理想视口 移动端适配解决方案1. viewport(scale=1/dpr)2. rem3. vm/vh4. flex移动端适配整体流程 1px问题及解决方案1px问题解决方案利用媒体查询 + css3的transform小数写px(如0.5px) 小知识参考链接 关于像素,括号中为别名 设备像素(物理像素) DP(Device Pixel),显示屏上的像素点,出厂即确定。 设备无关像素(设备独立像素) DIP(Device Independent Pixel),缩放比为1时,设备独立像素也等于CSS像素(逻辑像素)。我们通过CSS和javascript代码设置的像素都是逻辑像素。在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位,px是一个相对单位,相对的是设备像素(device pixel)。显示器上的小色框就是像素。