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
Related
I am developing a website. My target device is the Samsung Tab A8. As per the specs from their official website, its resolution is 1920 x 1200.
When I use the Google Chrome's Dev Tools and sets the responsive width and height to the above values, my website looks perfect on my Desktop PC(22 inch screen). But when tested on Samsung Tab A8 device, it breaks.
And Samsung Tab A8 is not in the list of simulators in Google Dev Tools. So am confused regarding the width and height that should be used in media queries. What should be the value that I should use for testing in Google Chrome in my desktop PC.
The issue is caused by the difference between Hardware Pixels (physical pixels) and Software Pixels (CSS pixels).
They are not the same!
High-resolution mobile devices have a high PPI (pixel density) to ensure sharp and clear edges. However, it would be hard to read text on such small displays with such high resolution. As such you have a "technology" implemented called DPR (Device Pixel Ratio). For most high-resolution devices it is 2. That means, that for every CSS pixel you have 2 physical pixels. In other words, your tablet has only a resolution of 960x600px CSS-wise.
An easy workaround would be the usage of:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
That ensures that the hardware pixels are the same as the software pixels. Note, that you harm User Experience and possibly make it harder to read the text for users.
Can I somehow simulate the 8 inch tablet( 2560 x 1600 pixels, 16:10 ratio (~359 ppi density) ) with big native resolution on RWD mode In Firefox or Chrome? I tried with setting DPI in devtools to 3 without any effect. Maybe there is smarter way to do it?
If that helps the application is ionic 3 for tablets. Thanks for any suggestion.
Amazon desktop website has min-width:1000px rule on its subelements like header etc. but it fits into the iPhone 6 viewport (which is 980px wide) without any horizontal scrollbars when I do "Request Desktop Site" on Chrome. How do they do it?
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
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>