[英]How get device resolution for loading sharp images but size fonts/divs properly with viewport width=device-width?
On mobile, if I don't use the tag (see below) to set the viewport width to device width, then fonts are too small and hard to read and divs size more like on a desktop. 在移动设备上,如果我不使用标签(请参见下文)将视口宽度设置为设备宽度,则字体太小且难以阅读,并且divs的大小更像在台式机上。
<meta name="viewport" content="width=device-width, initial-scale=1">
But if I use that, then choosing what size image to load will return a small, pixelated image because the reported pixel width is half what it really is. 但是,如果我使用它,那么选择要加载的大小的图像将返回一个小的像素化图像,因为报告的像素宽度是实际像素宽度的一半。 For example, an iPhone 5S will report a width of
320px
when it's really showing a resolution of 640px
wide. 例如,当iPhone 5S实际显示
640px
宽的分辨率时,它将报告320px
的宽度。
How do I allow for both these differences? 如何允许这两种差异? (without the viewport tag, the css will not size properly. with it, my code loads too low a resolution image on devices that report 1 pixel width for every pixel on screen)
(没有视口标签,css将无法正确调整大小。使用它,我的代码在报告屏幕上每个像素1像素宽度的设备上加载的分辨率图像太低)
I can't just double the pixel width when loading images because not every device/browser halves the pixel size. 加载图像时,我不能只是将像素宽度加倍,因为不是每个设备/浏览器都将像素大小减半。
I want the fonts and elements to be sized based on width=device-width
but not the images I load. 我希望字体和元素的大小基于
width=device-width
而不是我加载的图像。 How do I combine these? 如何结合这些?
获取window.devicePixelRatio
并将其乘以计划显示图像的宽度,以获取所需图像的实际宽度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.