问题标签 [retina]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
ios - 我需要将图像保存在@1x、@2x、@3x 吗?
我的应用程序中有一个部分显示用户创建和保存的所有文件。为了加快速度,当用户保存项目时,我会保存渲染项目的缩略图。该缩略图将使用
我的问题是:这个应用程序要在 iOS 7 及更高版本的设备上运行。这包括所有 iPhone 4 及更高版本(所有视网膜)和所有 iPad(视网膜与否)。因此,我们在这里处理理论上使用@1x、@2x 和@3x 资产的设备。
我是否需要以所有这些分辨率保存缩略图?听起来这不是这样做的方法。
有什么想法吗?
谢谢
css - 大小可变时的Retina背景图像css?
只是想知道一些事情。我正在构建一个具有重复背景图像(模式)的站点标题
这很简单,例如:
现在我希望它在高分辨率设备上看起来很清晰,所以通常我会给出图像尺寸并创建一个媒体查询,使用图像@2x 并将它们的宽度和高度设置为相同。
问题是我将在不同的页面上使用几个不同的背景图像,它们将具有不同的高度和宽度。
除了单独指定它们之外,有没有办法解决这个问题?
干杯。
html - 浏览器从 srcset 和原始图像下载图像
例如我有这样的img
:
在正常而不是视网膜显示器上,浏览器仅下载image-520.jpg
,但在视网膜显示器上,Chrome 桌面和 iOS 版 Safari 在第一次下载和渲染image-1040.jpg
时DOMContentLoaded
下载原始image-520.jpg
图像。谁能解释为什么会发生这种情况,以及如何避免这种情况?
java - ImageIcon 在视网膜显示屏上显示错误的图像
我正在从这样的 URL 加载图像:
该网址类似于http://example.com/image.png,因此是互联网上的图像。
这工作得很好,但是我收到了一些关于我的程序用户的报告,他们在 Java 8u20 的视网膜显示器上使用该程序时(可能会更高版本)得到奇怪的图像而不是常规图像。
我确定他们得到的奇怪图像是一个图像,如果没有找到图像,加载图像的 CDN 会自动重定向到该图像。经过一番研究,我发现较新版本的Java在Toolkit.getImage(URL url)
使用.new ImageIcon(URL url)
问题当然是如果没有找到图像,CDN 实际上会返回一个有效的图像,所以 Java 可能认为它实际上找到了一个更高分辨率的图像以在视网膜显示器上使用。我的程序中的其他图像也ImageIcon
以相同的方式使用,但从另一个来源加载,似乎工作得很好。
现在的问题是,解决这个问题的最佳方法是什么?我无权访问 CDN,因此我必须阻止 Java 尝试以某种方式加载第二个 URL(如果这确实是问题,但看起来确实是这样)。不幸的是,我没有一台计算机可以对此进行测试,因此很难判断哪种解决方案可行。
ios - Xcode 使用所有设备的视网膜图像
我的 XCode 项目中有以下图片。
但是,每当我将图像用作 appstore.png 时,只会使用视网膜图像 (2x)。任何帮助将不胜感激。
我正在使用 XCode 6.0.1 (6A317) 谢谢。
javascript - 检查视网膜是否仅使用一张图像
正如标题所说。是否可以只使用一张已经适合视网膜的图片,但是当不使用视网膜屏幕时,图片会自动调整大小/裁剪为非视网膜图片?我在使用 IE 时遇到了这个问题(而且我使用的是 PC)。我所有的图片在 Chrome、Opera、Moz 等其他浏览器中看起来都很棒。但是当我在 IE 中查看同一张图片时,它有这些“丑陋的边缘”。
我看到了这篇博文,但他使用了两张图片/图像。如果可能的话,我当然不希望那样。
更具体地说:如果我的图像是 500x500 并且在我的 CSS 中,由于视网膜屏幕,我将其缩小到 100x100 像素。但是,如果屏幕不是视网膜并且我使用的是我缩小的 500x500 图片,它就会有这些“脆边”。
为了向您展示我的意思,我使用 Chrome 和 IE(Edge) 为我正在使用的同一张图片拍摄了两张屏幕截图。以下图片的原始尺寸为 500x500,但已缩小为 100x100。
铬合金
IE
如果我不够清楚,那么回到我的问题:我可以使用一张图像,但在需要时告诉它是否是视网膜?
css - 视网膜设备上的响应式设计
我对 CSS 比较陌生,我一直在研究和研究这个,但我仍然非常不确定和完全困惑如何正确地为一个在具有视网膜屏幕的移动设备上工作的网站制作响应式 CSS。
当我使用 max-width 时,它无法在 iPhone 或 iPad 等视网膜设备上正确加载。它不起作用,因为这些设备的像素宽度实际上是两倍,对吧?我尝试使用and (resolution: x)东西,但这也没有真正起作用,视网膜设备只是不断加载标准 CSS。
然后我尝试了最大设备宽度。这在视网膜设备上效果很好,但现在我读到这是不鼓励的,因为它会在桌面上形成一个非流畅的网站。
那么在视网膜设备上定位宽度的正确方法是什么?我是否复制了 CSS 的那部分,并有一个用于非视网膜设备/桌面的最大宽度部分和一个仅用于视网膜设备的 css 的最大设备宽度部分?这对我来说似乎不对,但这是我能想到的唯一解决方案。
我正在尝试自定义 OJS 页面 ( https://pkp.sfu.ca/ojs/ ) 所以我只能使用单个 CSS 文件,即使编辑 html 也会有问题。因此,例如,我试图在带有视网膜的 iPhone 上查看时放大导航栏,所以我这样做:
如果我使用 max-width,它不会增加手机导航栏的高度。
ios - iOS 设备上的调试给出了错误的屏幕尺寸
我正在尝试在 iPod 5(4 英寸视网膜屏幕)上运行我的应用程序,但它显示了 3.5 英寸版本的应用程序。
在 iPhone 5S 上,它确实显示了正确的屏幕尺寸。是否有任何已知的设置可以完成这样的设置,我怎样才能再次将其关闭?
retina-display - 视网膜,懒惰的方式?
我计划使用 Bootstrap 构建一个简单的静态站点,据我所知,它不像Foundation那样具有对视网膜图像的内置支持。我很好奇,是什么阻止了我将网站的所有图像制作成预期大小的两倍(例如 600x300),然后在将其放入代码中时将其缩小?
我能想到的唯一问题是文件大小非常大的图像。在这种情况下,我可能需要找到一个与 Bootstrap 配合得很好的视网膜 JS 库。继续以懒惰为主题,希望能与 bower 和 grunt 一起将自己注入代码中。
ios - iOS 图像资源大小
在 XCode 6 中,在资产目录 (xcassets) 中,我们现在可以选择 1x、2x 和 3x 的图像集
我们知道 1x 是 320 x 480。
3x 需要 1242 x 2208
但 2x 有几个选项:640 x 960、640 x 1136 或 750 x 1334
我是否只选择最大的一个(750 x 1334),它会为 iPhone 5 缩小尺寸?
看起来,就像启动图像和图标大小的资产一样,一般图像资产应该有更多选项。