I have CSS with the next media #media screen and (max-width: 640px)
IE 11 uses CSS inside this #media even though the window width is much more than 640px. If I manually resize the window (in any direction, increase or decrease) then IE 11 picks up the correct CSS(outside of this #media) and everything looks good. In other browsers, everything works as expected.
How this problem can be tackled?
Probably I can emulate window resize somehow?
Thank you in advance.
UPD: Also if devtools are enabled everything is working as it should...
Related
So I'm having a strange Chrome viewport issue that I've not had issues with before. First: I am using Bootstrap 5 and thus it's breakpoints - to highlight my issue with a site that I'm working on we'll examine the 992px width breakpoint. Using this 992px value as the media query where my mobile menu would be triggered I have rules set within the following: #media (max-width: 991.98px) {...} Looking at Chrome's Dev Tools' Device Toolbar you can see that the viewport correctly shows the mobile menu being triggered at a width of less than 992px (~991.98px)
Desktop view 992px Mobile Menu View 991px
However when not using the Device Toolbar and just resizing the screen, which I find easier and my usual workflow when doing responsive edits, the viewport width seems to be off by 15px. Meaning my mobile menu breakpoint (in the resizing viewport width) seems to be triggered at 976px instead of 991px width - see attached photos. I've just notice this today and know it used to show the correct/same width value as when using the Device Toolbar. I'm wondering if I've changed some type of setting that I am unaware of. Note: my zoom value is default at 100% and my Chrome version is the latest official build Version 94.0.4606.54 (Official Build) (x86_64) Resizing Window Desktop View 977px Resizing Window Mobile Menu View 976px Really appreciate any help. Thank you.
i also have this issue.
and i find my edge、 firefox also have this issue
https://imgur.com/IUyTpu6
above link is i use Edge open bootstrap5 website
https://getbootstrap.com/docs/5.1/examples/features/
it breakpoint is 991px,
but the browser width is 976px still not change
#media (min-width: 992px)
.row-cols-lg-3>* {
flex: 0 0 auto;
width: 33.3333333333%;
}
it still be influenced by that
This is fixed with the new Chrome update today 11/24/21
Version 96.0.4664.55
When designing a website, the website looks proper on all displays and browsers. However, when moving towards HDPI displays (above the resolution of 1920x1080), chrome and Firefox scale the content by default. This makes text, that looks correct on Microsoft Edge, very big. I could change my browser settings but the not everyone would.
I would like to know how to have the text scale properly and look the right size on HDPI displays.
Use Media Queries
#media screen and (max-device-width : 1080px)
{
body or yourdiv element
{
font:<size>px/em/cm;
}
}
This Link might help as well. Optimize for Displays
Ok so my media query is working fine in chrome, but when I try the code in firefox or ie, the margin-top or margin-left are different and not accurate like in chrome !!!
Here's the code I use:
#media screen and (max-width:800px) {
#box-move {
margin-left:-20px;
margin-top:40px;
}
}
So is there a special tecnique for firefox or ie?
Thanks.
It’s actually not a CSS or CSS interpretation problem at all–it’s the way Firefox does (or doesn’t) resize the viewport.
Unlike Google Chrome, and most other browsers, Firefox allows it’s toolbars to affect viewport size. The only way to make the viewport resize below the width of your toolbars in Firefox is to disable them.
You’ll need to go to View > Toolbars and uncheck each. Then try resizing and watch your media queries take effect.
I hope I explained that right. It’s been a trying day!
I tried to use this media query
#media screen and (device-aspect-ratio: 40/71) {}
for the iPhone 5 responsive design. I can see the effects in my iPhone 5. But for that every time I need to upload the modified version to server. Is there any way to see the changes reflecting in this iPhone width by just re-sizing the window size? Or am I missing something stupid?
you can user ctrl+shift+m in mozila to test the effects.
I have being tearing my hair out trying to get a fix for this, the site is built with Twitter Bootstrap and is responsive, and works fine on all devices apart from iPad & iPad mini in portrait where it is always wider that the devices screen.
I know that there is a problem on device rotation with iOS devices, but this is on page load in portrait.
Any advice would be great, I am not sure if it is a problem with Bootstrap or something I have done.
http://bodysgallen.ws-django.co.uk
you may need to make a new set of responsive CSS to fit that screen size.
EG you have something like this #media (max-width: 979px) & #media (min-width: 1200px). You might need to add another one in between to handle the size of the iPad on portrait.
I'm not sure if the problem is related specifically to iPads. Something odd is happening with your grid at a viewport of 769px - 945px (approx). It's not responding correctly.
If you check validation results for the page there are a number of errors which aren't too important but at the end there are two I would fix, an unclosed container div and a body tag that was already closed. http://bit.ly/11fKdhG
While these 2 errors aren't necessarily the cause of the problem, I think you want fix them first.
Hope this helps!