Questions tagged [pixel-ratio]
39 questions
35
votes
2 answers
What are best practices for detecting pixel ratio/density?
I am currently using JavaScript for mobile device detection on my website, this then allows me to serve different content for mobile or desktop users.
Currently I use window.devicePixelRatio and screen.width to work out if the user if on a mobile…
lukehillonline
- 2,430
- 2
- 32
- 48
14
votes
3 answers
How to use React Native PixelRatio utility class?
I have an app written initially for iPhone 6 symulator which has a componend syled with following example values:
const styles = StyleSheet.create({
headerNav: {
width: 40,
height: 40
},
headerLogoImage: {
width: 140,
height:…
damax
- 453
- 1
- 5
- 18
8
votes
2 answers
How to override device pixel ratio
I made a responsive website which works fine with different screen resolutions. I use three different media queries - from 0 to 640, from 640 to 960 and above. Anyway if I try to open on my Samsung Galaxy Note2 which uses 720x1280, since it has…
kosijer
- 311
- 1
- 3
- 7
7
votes
1 answer
Font-size and device-pixel-ratio
Let's say that I have default font size set to 16px (this should be redundant since it's default in most browsers):
For brevity, my site contains some box with size 10em x 10em.
body, html
{
font-size: 16px;
}
.box {
border: 1px green…
Mirek
- 4,013
- 2
- 32
- 47
6
votes
3 answers
Implementing responsive images that are dynamic-width, static-height, and DPR-conscious
For each post on a website, there will be a header image. This image will have a width of 100vw and a height of 300px. I would like to deliver multiple versions of this image via either the srcset attribute of an img tag or a full-fledged picture…
Marcus McLean
- 1,306
- 2
- 13
- 24
6
votes
2 answers
Media queries and device pixel ratio
I'm in the process of redesigning my website and I've decided to take a shot at responsive layout. I'm new to CSS3 media queries and can't figure out how to make the site behave as intended on my smartphone.
The page has currently this viewport meta…
mingos
- 23,778
- 12
- 70
- 107
5
votes
1 answer
Double-width borders on Android devices with a CSS pixel ratio of 1.5
Given a simple page (source below) that contains an element with a 1px border, it will render like this on Android compared to iOS:
As you can see, the Android border does not have a uniform width, sometimes being 1px and sometimes being 2px wide.…
fresskoma
- 25,481
- 10
- 85
- 128
4
votes
1 answer
Sizing using pixel ratio when creating websites
Right now there is a debate in the company that I work, if we should specify the dimension of our templates (divs, fonts etc) based on the pixel ratio of the devices (computers, smartphones etc.) or just simple pixels.
What do you think about…
VladN
- 729
- 1
- 10
- 29
3
votes
1 answer
Canvas to dataURL Image Png quality not working
I've been trying to convert an HTML5 canvas to dataUrl with a low quality because I have to transfer the dataURL files through a server but wether I do
dataURL = document.getElementById('canvas').toDataURL("image/png", 1);
or
dataURL =…
Woold
- 783
- 12
- 23
3
votes
1 answer
How to use android images for different pixel ratio in android? What should I use for hdpi images I can't use imageName@1.5x?
I have 5 images from designer mdpi, hdpi, xhdpi, xxhdpi and xxxhpdi as I found out that in React Native i can only give
check.png
check@2x.png
check@3x.png
I have read Image sizes for android and iOS in react-native but i don't how to provide…
Ankush Kalra
- 91
- 4
- 11
3
votes
3 answers
Markdown with HiDPI/Retina images
How can I display images on a HiDPI display using HTML produced from Markdown such that the images are shown in high resolution. Normally, I'd create ![]()
tags with srcset attributes or set the width and height on each image appropriately or use…
at.
- 50,922
- 104
- 292
- 461
2
votes
1 answer
What resolutions should I include in a srcset attribute?
What resolutions does it make sense to include in the srcset attribute? MediaWiki uses 1.5x and 2x. Are there e.g. any devices that would make use of 3x?
edit: The answer to the last question seems to be “yes”.
edit October 2015: To cater for most…
leo
- 8,106
- 7
- 48
- 80
2
votes
2 answers
CSS pixel and optical sizes with new screen resolutions (such as Retina)
I am looking to make my websites appear the same size on retina and other higher resolution screens that they do on standard screens. That is to say make them optically look the same but with more detail on the higher resolution screens.
So if we…
Walrus
- 19,801
- 35
- 121
- 199
2
votes
1 answer
How can i make a 460px screen show a 640px design zoomed out, while having a 320px template as well?
Viewports, @media, pixel ratios and so on are giving me a hard time. I have a smartphone (responsive) website with one 320px and one 640px template and i want to achieve the following:
Up to 320px width: show 320px template.
From 321 to 639 px…
DesignConsult
- 191
- 1
- 4
2
votes
1 answer
How to create an SVG with support of more than one Pixel Ratio?
I would like to create resolution independent SVG that uses element. Is it possible to test for actual pixel ratio of the user agent? Please look at the example:
mato
- 173
- 8