I like to use Firefox 'Responsive Design View' to emulate multiple mobile devices on my desktop. But I'm in doubt about one thing.
As far as I understand iPhone with Retina use 2 physical pixels per one CSS pixel. And Firefox 'Responsive Design View' do not. That mean that if I want to emulate iPhone 4 screen with resolution 960x640 I actually should use FF RDV preset 480x320 (and add preset 568x320 for iPhone 5). Right?
You're right that you should use the 480x320 viewport size, as all sizing measurements are based on logical pixels not the screen's physical pixels.
If you want to thoroughly test the site for retina content, and you don't have a retina screen, change the value of layout.css.devPixelsPerPx in the about:config page to 2. -1 is default. Note the UI will all look huge, but this will properly kick in pixels per px media queries, etc.
I just tried the devPixelsPerPx tweak along with RDV, and it works well - RDV looks like a great tool!
Related
Sections of my site look a little different on Chrome Dev Tools simulating an iPhone 12 than an actual iPhone 12. Why is this? I've signed up for browserstack. Do you guys think they produce an accurate representation of a site on different devices? Do you recommend any others?
This is the site (iPhone 12) on Chrome Dev: https://snipboard.io/OpU8aj.jpg
Same site on my iPhone 12: https://snipboard.io/vl6b8f.jpg
Notice the type in relation to the red background?
I'm wondering too... This is the first time I've used %'s for my padding and margins. I usually use em, rem or px. Could using percentages have something to do with it? I do understand the the percentage is based on the parent element. But still... not sure if that has anything to do with it.
Thank you
I was having the same issue. I learned, and I'm sure most of you know this, any iPhone above an iPhone 8, that Apple's documented viewport size is not the actual pixel size (w x h) that displays a website or app. I discovered this after researching Apple dev docs. There is now a "safe area" leaving room for native device buttons on the top and bottom in portrait mode, or both sides in landscape mode. You subtract the area for these buttons from the manufactures documented viewport size to get the real displayed viewport or "safe area". Of course it will be different for every device.
I hope i'm not breaking any rules with the following. I used "what is my viewport" https://whatismyviewport.com/ Pull up this url in any device and it will show the actual width by height in px, of that device. This is the actual size your website or app will be displayed at.
I am now able to set new media queries using the above info instead of media queries based on the device manufacturer's documented viewport size. This solved the issues I was having.
I'm trying to build a responsive website for ipad and mobile as well.
This is the Link if you want to check it out.
Anyway, when I use the devTools in chrome for checking out the layouts on the Galaxy S5, then the landscape view is all good. When I check it on the actual device, then the height seems to be a bit less, and some parts of the website are actually cut out. Probably due to some parts of the device not being accounted for in the height.
Screenshot from the chrome dev tools, using the width and height of the S4 mini viewport when in landscape mode:
Screenshot from the actual device in landscape mode
So the questions are:
How do I actually use the devTools in Chrome to get a precise
representation?
Do I need to actually account for browser size in the #media (min-width: whatever px) query?
Is my question wrong from another perspective I haven't considered? Am I missing something?
I have a question that I have searched for hours and can't find any solution to my issue.
I am trying to make it so when you resize the browser the mobile versions and break points don't show when on a desktop.
So when you're on a desktop you should be able to resize the browser to a point where you will have to scroll horizontally, rather than showing a mixture of desktop and mobile version. apple.com does it where when you resize the browser it only goes so small and you never see the mobile version. Which you shouldn't because you're on a desktop.
Here is the site:
http://www.avrs.com/
To recreate the issue you can resize your browser and at about 1000px it breaks and is ugly. You may also say that I am doing the display: none; wrong which you are welcome to inform me of how to fix.
Also I am familiar with the http://getbootstrap.com/css/#responsive-utilities. But they didn't seem to fix this issue either.
There are several techniques to achieve what you want. The easiest is to use CSS media-queries with specific properties.
Usually min-width or max-width are used for the CSS breakpoints to make your website mobile-friendly (Responsive Web Design). If you want to avoid this on desktop browsers you can use different properties with values specific to mobile devices:
min-device-pixel-ratio
min-device-width
orientation
This source will provide more relevant information: article on css-tricks.
Another question is: Why would you want to make your website unresponsive and not user-friendly like that? In year 2014 I (and pretty much most of the users) expect websites to adapt to the browser's window size.
Scenario: I really like browsing websites with my browser on one half of the screen and eg. chatting with someone or watching a movie on the other half.
Consider this point. I think it's better to improve your website so it works nice in all different resolutions because you can never assume anything about your users and their devices (smartphones, tablets, netbooks, laptops, desktops…). Nowadays I can easily get a smartphone with higher resolution than my desktop computer, or a laptop with a touch screen.
The devs at Apple are using max-device-width (plus other media query rules, like dpi, min/max width, etc.) to determine if the mobile version will be shown. Because desktops typically have a larger physical screen, the max-device-width rules will rarely be shown on desktops (but it isn't full proof, as shown below - You'd want to look at adaptive design for a separation between desktops and mobile devices...)
You can test this by setting your resolution to something much smaller. Here's an example on my Macbook Pro at 720px x 450px (via Display Menu) running Chrome.
I am building a Phonegap application with two layouts: one for 'handhelds' and one for 'tablets.' I want devices larger than 6 inches to display the tablet layout and smaller devices to use the handheld layout.
I've looked into media queries. My concern is that if I target a device by pixel size, for example iPad1 768px, a high-density handheld will come along that also qualifies for this query, showing the wrong layout and making the text unreadable and the widgets too small. I've considered webkit-min-device-pixel-ratio > 2 for this query, but doesn't that leave 'gaps' where an unfortunate combination of resolution and pixel ratio triggers the tablet template on a handheld device?
So, what is a general strategy I could follow to reliably 'pick one' of these two layouts (and avoid overlaps between devices) when the device loads? I am only supporting portrait mode and I can change all CSS, JS, <meta name="viewport"> etc..
Essentially, I'd like to be able to come up with some rules to differentiate between columns 2 and 3 here http://nmsdvid.com/snippets, but without targeting specific device models.
Thanks!
I think pixel width in media queries are still standard width, all current iphones display a document width of 320px. This is as the UIwebview used in phonegap is just a standard browser environment.
My css needs depend on the amount of cross over between my iphone and Ipad versions of my app. If the css is almost the same I will just have extra css for Ipad devices in the one CSS file using a media query, otherwise I will have a different file for each.
I came across several ways and questions about the sizes of the ipad and iphone and how to use different css. Is it really necessary, especially now with more versions of the ipad and iphone to have a different background for each and every device?
Almost every answer/site about this problem tells the user to use the resolution 1024 for an iPad but according to Apple's site the latest iPad has a resolution of 2048 x 1536 pixels?
So do I need to make one background with 1024 in width for iPad 2 (or whatever), then one with 2048 for iPad 3, another one for iPhone etc or is there an easier solution?
I thought "background-size: cover" would be the solution for every resolution (since it scales automatically) but it apparently isn't since it doesn't seem to work on an iPad.
So do I need to make one background with 1024 in width for iPad 2 (or
whatever), then one with 2048 for iPad 3, another one for iPhone etc
No. Despite the different device resolutions, they still follow the original numbers in terms of targeting them with CSS. So all iPads respond to device-width: 1024px, and iPhones still stick with 320px, even if they now pack in far more pixels.
The only thing to be aware of is that iPhone5 is a little taller so it responds to 320 x 560px.
Anyhow, in terms of background-size, all of this is kind of irrelevant, because the whole point of it is that it can size the image appropriately to cover any screen if you use background-size: cover.