So I have noticed that a website I created looks bigger in Chrome than it does in IE11.
I couldn't figure out why. The zoom was set to 100% in both browsers.
If I go to http://viewportsizes.com/mine/ it reports the following viewport sizes:
Chrome - 1280 × 619 and IE11 - 1920 × 906
My question is why does this happen? How can the two browsers report back two largely different sizes?
Please tell me what device are you using? (IE Version, Windows Version, Device size)
Probably you use a mobile device (like 10 inch tablet) with Full HD resolution. Unfortunately I have no such Windows device, but this is a common behavior of mobile devices and chrome/firefox.
The reason shortly is that viewport does not represent the screen resolution and is mostly optimized for better user experience. Here I mean, that for an 10 inch device, browsing webpages in full resolution would result in a non readable webpage, a short example you can find here
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
More details about viewport you can find here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Note that IE is 'integrated' with the operating system, meaning, that DPI settings on your device also should have influence on IE (icon text size on your desktop and context menu text size is probably the same as a text in IE).
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.
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 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.