CODEWITHSUNDEEP
javascripthtmlcssmobileresponsive-design
12preschph
12preschph

Reputation: 331

Responsive Design on mobile phones with higher resolutions

To my understanding (correct me if I am wrong) a modern Responsive website will change to fit the size and type of device you are using. Or this can be applied if the size of the window changes.

My question is why does my mobile phone display a Responsive site just like how a modern 1080p monitor would display it.

Essentially, my current monitor is running at 30" and is at a resolution of 768p. My phone also has a resolution of 768p.

Many responsive websites use media queries to display a CSS file based on the pixel width.

Wouldn't this be the same for both my monitor and phone?

MY QUESTION: How can I make a site responsive based on the screen size (in inches, etc) and not the screen resolution or number of pixels.

EDIT: My responsive design has 3 levels of CSS for different pixel widths (media-queries). When viewing on a monitor or smartphone, it displays the higher-most level (above 767p). How can I get my smartphone to display my lowest-level CSS (below 480p) even though it actually has more pixels.

Upvotes: 4

Views: 3724

Answers (1)

Godinall
Godinall

Reputation: 2290

I recently created a website using similar tech http://www.super-rod.tv/ It targets on both PC and mobile devices and will response to dynamic browser width resizing. I used media query with max-width listing from higher-most to lower. For 1080P screens it has the best full screen display and for larger ones like 4K screen it will be centered with a texture background, on lower res like 768P it uses a smaller set of images and also be centered just like on a 4K screen. If you are only targeting mobile devices, you can use device-width instead see ref here width versus device-width To force using lowest CSS set you can either by using the max-width of 1000px (I don't think those who are still using 800x600 on PC would be your target?), this would pass out all desktops, or you can use browser UA to tell (defining for all IE,Safari,FF,Chrome,Opera etc., and the rest are mobiles).

Upvotes: 1

Related Questions