- This topic is empty.
September 3, 2013 at 6:19 am #148900
I am having some problems in designing media Queries for one of my site.
I have nice break points model based on pixels but It breaks at small screen HD devices.
Ex. 7″inch Galaxy Tab 2 have 1024 px wide screen but screen is smaller then monitors with same resolution. So even if I make bigger buttons for 1024 it looks smaller in 7″ screens b/c some tabs have more PPI then normal computer/laptop screens.
This case become more worst in ipad 3 it have very high resolution in 10″ screen.
Is there anyways to get Screen’s correct DPI or Screen size in inches ?
Kindly aDvise.September 3, 2013 at 8:19 am #148920EdParticipant
I’m not sure if I completely understand your problem. I think you’re worried about the physical size of tablet screens vs. the amount of pixels in them?
iPad’s and Samsung Galaxy’s do indeed have a high DPI screen, but they will handle pixels in your stylesheet in the same way as normal screens, so you don’t have to worry about that.
If you write media queries that follow the standard syntax, and create your layout using percentages (and the new box model), you shouldn’t have a problem.
window.devicePixelRatiowhich returns an integer (i.e. on a Retina MacBook Pro & iPhone it returns 2). As for getting the screen’s size in inches, that doesn’t seem to be possible.September 4, 2013 at 8:16 am #149011
Thanks for your respond.
Yes I am using percentage based layout only so it fits to most resolutions.
But I need break out of layout on same pixel resolution on different devices.
Let me explain in other words with example.
I need only one column in my layout while it is viewed in 1024px wide Galaxy Tab.
And I need 2 columns in my layout while it is viewed in 1024px wide computer screen.
Actually screen size of 1024 wide Tab and computer is different.
Kindly advise.September 4, 2013 at 1:13 pm #149049basement31Participant
If you want to change the layout specifically based on device as opposed to its pixel per inch value or device width thats beyond css I believe,
If you want to change the layout based on pixels per inch / retina this may help
https://css-tricks.com/snippets/css/retina-display-media-query/September 4, 2013 at 6:50 pm #149095
yes I know It can not be handled with CSS only. If it is possible via JS or PHP.
Here my concern is Physical screen size.
:)September 6, 2013 at 12:01 pm #149287Eric GregoireParticipant
From what I gather you are trying to accomplish, you aren’t going to need a screen’s physical size. Maybe you could work something out with calculating the PPI (or DPI) and the number of pixels to get measurements in inches (considering PPI includes the measure “inch”)…
But, based on what you have explained, you want to differentiate the layouts of a tablet and computer monitor that have the same pixel width. You may want to consider media queries that are based on PPI. A tablet is generally going to have a higher pixel density than a standard computer monitor. There’s some reading to be done :: https://css-tricks.com/snippets/css/retina-display-media-query/
- The forum ‘CSS’ is closed to new topics and replies.