Need help to understand if I have device-width predefined like these:
Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)
then how can I know the device-height?
Because on one page-site it looks in one way on 768px x 900px and in other way on 768px x 750px.
Hope it makes sense!
Cheers,
Sandra P.
In responsive design, (actually in web design general) manipulating or changing the content or the look of the interface by height is not really recommended.
Users usually does the "scroll down-up" movement when they are browsing a content. This is same in both hand-held devices and desktop computers.
Managing the content via width is a better approach, you don't really need to know the height.
I can give a little list of height references, but keep it in mind, since it not really used much, it would not be accurate;
Extra small devices Phones (<640px)
Small devices Tablets (≥640px)
Medium devices Desktops (≥820px)
Large devices Desktops (≥900px)
Also I can highly recommend the responsive test module of the Google Chrome developer tools. Addition to that, there is lots of online apps and kits to test the visual look of your design on different sizes of devices and screen sizes.
Note That, using the most popular device screen sizes might be a good approach also.
Here is a list of popular hand-held devices and their heights;
Apple iPhone 7 - 667px
Apple iPhone 6 Plus, 6s Plus - 736px
Apple iPhone 6, 6s - 667px
Apple iPhone 5 - 568px
LG G5 - 640px
LG G4 - 640px
Samsung Galaxy S7, S7 edge - 640px
Samsung Galaxy S6 - 640px
Samsung Galaxy S4 - 640px
Samsung Galaxy Nexus - 600px
Samsung Galaxy Note 3 - 640px
Microsoft Lumia 1020 - 480px
Microsoft Lumia 925 - 480px
Motorola Nexus 6 - 690px
HTC One - 640px
Sony Xperia Z - 640px
Check this link for all devices and their screen sizes; http://mydevice.io/devices/
height does not matter.set height:auto to the html body content,based on width we can align the components in the html body content.
test responsive website:
https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=en
Related
Why do breakpoints like #media only screen and (max-device-width: 480px) work for iphones and other modern smart phones even though they have for example 2436-by-1125-pixel resolution?
When I am working with Dev Tools in Chrome, why does iPhone X show 812-by-375-pixel? What am I missing or misunderstanding here?
Thank you for the answers.
There are hardware pixels and software pixels. A hardware pixel is an individual dot of light in the display. A software pixel, also called a CSS pixel in the web world, is a unit of measurement.
I need to detect the devices for IOS devices by JS,
for iphone-6 I check it by the ratio and devicePixelRatio,
I didn't find any information to check if the device is iPhone 7 plus.
I found information for the older devices,
What are the device-width css viewport sizes of the iPhone6 and iPhone 6 Plus
or this
http://mydevice.io/devices/
iPhone 7 has same device width/height as the iPhone 6: 375x667
iPhone 7 plus according the same: 414x736
You can easily detect your device CSS width and height by single clicking this link: http://viewportsizes.com/mine/
For iPhone 6 its 375px X 667px
For iPhone 6+ its 375px x 667px
For iPhone 7 its 375px X 667px
For iPhone 7+ its 414px x 736px
The iPhone 7 Plus is 414 x 736 according to Apple:
https://developer.apple.com/library/content/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
When breakpoints are set in CSS for responsive web designs, media queries check the width of a device so that different layouts can be appropriately displayed. As I thought I understood it, the pixel units in the media queries were referencing the rendered pixel resolutions that we commonly see in device specs. For example, the iPhone 5 at 640 x 1136px or the Nexus 5 at 1080 x 1920.
But now I’m confused about whether breakpoints are instead meant to reference a device’s points (for iOS) or density-independent pixels (for Android).
This question largely stems from how I’ve often seen common breakpoints referenced, with buckets defined for phones, tablets, and then desktop screens. This, for instance, is from Bootstrap’s documentation:
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
But wait a second. The Samsung Galaxy series has a few phones nowadays whose resolutions are 1440 x 2560. With the breakpoints above, these higher-resolution phones would be treated like desktops, wouldn’t they? Even the iPhone 6 Plus would qualify as a desktop. That can’t be right.
And while I know it’s best practice to define breakpoints based on content and not the device, the Bootstrap example is representative of a seemingly widespread idea that there ought to be breakpoints for portrait phones, landscape phones, tablets, and desktops … but a single bucket for all portrait phones doesn’t make sense if we’re talking about rendered pixels, because there’s so much device size diversity in that category alone!
Finally, I also found this kinda related post, which encourages setting the viewport meta tag so that “the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.” (Emphasis is mine.) So to return to the Bootstrap example, even though the unit says px, it could actually be referring to pts or dps?
All of this – plus a parallel investigation of mine into the concept of designing in 1x to 4x for different screen densities – has got me completely spun around on what feels like it ought to be a basic issue. Am I making this out to be more complicated than it is? And dps and pts relevant only to native development and not responsive web design? What units exactly are media query breakpoints referencing?
From the very same post you referenced in your question:
Stack Overflow– “Should I use max-device-width or max-width?”
In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.
So to answer your question, pixel-based media queries– combined with the correct <meta name=viewport> tag settings –will reference rendered (as opposed to actual) pixels.
Hi I'm trying to write a media query that will affect all phones but not iPads.
I'm having a hard time doing so because apparently android devices change their device-width as they change orientation. Portrait to Landscape means the width becomes the height and vice versa. Apple devices report their device width as the same value regardless of orientation. The fact that there are android phones with higher resolution than iPads further complicates the issue.
If there is an android phone with a device height of 1280px and iPads have a device height of 1024px, how can I write a media query that will affect all Android phones but not iPads?
You could use this to differentiate an Android device in landscape from an iPad in landscape, but I'm not sure on portrait:
<style>
#media all and (min-device-aspect-ratio:1/1) and (orientation:landscape) {
/*because an iPad doesn't change it's width, it's device aspect ratio will not be greater than 1/1 */
body {background-color:#00FF00;}
}
</style>
This mobile website:
http://www.tomorroworld.com/instarea/
Looks good both on iPhone 4 (Retina Screen) and regular iPhone screens. But on Android phones, it's too much zoomed in. How can I fix this easily?
This is what the viewport tag looks like:
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,user-scalable=0"/>
Consider converting your widths to be based on percentages rather than pixels and then let them scale down in smaller devices. You could also add in some media queries for additional layout control at smaller sizes.
Using viewport as you have is essentially hard-coding your page width at 320px for all mobile devices - works great for older iphones but not for many other devices.