0

I have an issue with the display of my homepage. It's my very first try in responsive design, and I guess it's not to bad so far. I uploaded the project here: https://adventuretrails.000webhostapp.com You should be able to access all necessary resources there, too.

Since this is a very early version there are a lot of mistakes involved, but I want you to focus on this particular one:

If you resize your browser window, you can see the style changes to a tablet version, if you shrink the window a bit more to a mobile version. This is how I want my homepage to be displayed on every mobile device.

Since devices have different resolutions, it looks good whenever the mobile device has a pixel-ratio of 1, it looks okay if the pixel-ratio is 2 (iphone5), but everything above 2 is absolutely ugly.

I know I could set up css styles for every possible pixel-ratio, but this cannot be the final solution, right? For now the maximum customary device-pixel-ratio is something around 4, I guess. But in a couple years there will be a whole lot more.

So is there any way to let the browser know, to display my homepage with device-pixel ratio 1 ? Or a similar solution, which saves me the detour of defining css styles for every pixel ratio?

maxischl
  • 579
  • 1
  • 11
  • 29
  • Have you tried with the [meta tag](https://css-tricks.com/snippets/html/responsive-meta-tag/) ?? – DaniP Nov 01 '16 at 21:17
  • I think you're focusing too much on the device pixel ratio when it comes to the size of your elements as they all covert to CSS pixels. The major area of concern for device pixel ratio will be for resources like images. You'll need to supply larger images with higher display resolutions/pixel ratios. i.e. if you display a `100x100` image at 100x100 CSS pixels it will look fine on a desktop but crummy on a mobile device with pixel ration of 3:1 or more (2:1 may or may not look bad). For those higher resolutions you'd want a `200x200` images (or larger) displayed at 100x100 CSS pixels. – hungerstar Nov 01 '16 at 21:23
  • I hope I was correct in assuming that you were talking about images and not element layout. If you're talking about elements it probably due to your use of absolute position of some elements (which isn't very flexible and responsive). – hungerstar Nov 01 '16 at 21:25
  • @DaniP - well, I tried the meta tag included, yes, but it doesn't seem to work – maxischl Nov 01 '16 at 21:28
  • @hungerstar - sorry, that was my fault, I got to change my question. I'm not worried about pictures, yet. Right now I'm stuck with the positioning of elements, but i guess the issue with images is close ahead, so thanks for your advice concerning those! But I think I didn't use any absolute positioning of elements where it has any effect on the aggregated design. I'll double check in a minute. – maxischl Nov 01 '16 at 21:34
  • Then what exactly are you referring to then when talking about pixel ratios? If it's not images or the layout? – hungerstar Nov 01 '16 at 21:37
  • yes sorry, it's all about the layout! - just wanted to say it's not about images in particular. sorry for confusing comments ! – maxischl Nov 01 '16 at 21:43

0 Answers0