So I have a responsive site I'm working on, which displays fine when I'm viewing it on my computer. As I resize the browser in Chrome, IE, Safari..etc, the site responds to the media queries I've declared in the css document. However, when I'm viewing the site on an iPhone, iPad or any other mobile device, the media queries aren't being detected and it's showing the scaled down version of the desktop breakpoint. Additionally, i have a Chrome extension that detects media queries in sites, and it says there's no media queries detected on my site.
I do have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head tag and my media query in my css looks like this.
#media screen and (max-width : 620px) {
ul.mainmenu {display:none;}
footer {height:140px;}
}
Mobile devices only seem to respond to "max-device-witdth" but not "max-width" And while that's fine for me to just duplicate the media queries with "max-device-width", the rest of the elements that aren't specified in the media query still displays as a scaled down desktop view. Any ideas?
Not really an answer to my question,but I figured out what was going on. The site is hosted on GoDaddy with a virtual domain name. so I'd been accessing it at vanityname.domain.com. When I hit that site on my phone, or on desktop, for some reason the HTML5 document is loading as a HTML 4 document. However, if I go to www.domain.com/vanityname, the site shows as a HTML5 document. Not sure at all the reasoning behind that, but would have saved me hours of frustration...
Related
Can someone help me understand why the site - https://amandeepsinghkhanna.github.io/about/ is responsive on the PC, on android phones but breaks on the iPhone. I have the media query as well as the viewport meta tag included in the code. It is hosted on GitHub-pages, if it helps in solving the issue.
Here is the result when i reducing browther width to 740px. No scrollbar;
Same width but in chrome device toolbar
Now scrollbar appears.
This happened because i'm using negative right margins in some blocks, but i also using
body { overflow-x: hidden }
to prevent scroll. It works perfect until i turn on chrome device toolbar. What is the reason of this behavior? Should i don't use negative margins?
I was having a similar issue, and found an answer that may help you here.
For me the issue was the Media queries I was using looked like this:
#media only screen and (max-device-width: 600px) {...}
The -device- part of the selector, ensures your CSS is only being applied to mobile devices. Consequentially, the chrome device toolbar is used specifically to test CSS on mobile devices, which is probably why you are seeing the css applied properly there, but not when you resize your browser window on its own.
Try removing -device- from your media queries to instead look like this:
#media only screen and (max-width: 600px) {...}
Which should apply your CSS changes on both mobile devices and desktop.
Also make sure you have the following code in your HTML header, to ensure the viewport is configured properly:
<meta content="initial-scale=1.0, width=device-width" name="viewport">
Hope this helps!
chrome tool is for mobile device testing. it actually display mostly same in mobile device. without chrome tool it will display for desktop browser compatibility.chrome tool
so chrome tool actually gives the view mostly same as mobile device.
for mobile view testing it's better to use chrome tool for responsive mode.
chrome tool uses User Agent.
The User Agent Type, or Device Type, setting let's you change the type of the device. Possible values are:
Mobile
Desktop
Desktop with touch
I'm using wordpress and I have my own built table on some page.
This table is showing some info for mobile users and more info for desktop users (because of space).
I'm using css rule
media only screen and (max-device-width:
to show the correct info for mobile users (i'm using display: none to hide some parts).
Everything works great but, when I click on my mobile browser to view as desktop, it does show as desktop the whole website expect my table which remains the same as mobile (with hidden parts).
What can i do to recognize this situation?
Thanks
I have successfully tested the responsive design of my website on an iPhone locally but when I deploy it the responsive design :
works when resizing my browser's size on my desktop
do not work on my iphone
When I say it works I mean I can see it toggles the Bootstrap navigation bar for small devices, uses my custom css media queries, etc.
I have these meta in my html :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The answers I have come across mention the meta tag but it is already present on my site (I used the HTML5 Boilerplate starter). Any other ideas ?
I finally found the issue... Not at all related to my code but to the redirection from my domain name to my hosted page. My provider was using a html wrapper that basically obliterated my HTML tags (and consequently my <meta> tags). What I did was just looking at the HTML and figuring something weird was happenning... I stopped using their odd web redirection and started configuring my DNS right. Everything is working fine now.
One thing you could look for are css media queries which might specifically target iPhones or smartphones and stop them displaying a responsive behaviour, while leaving desktop browsers unutouched.
For example comment out or re-inspect any css media queries that target (min-device-width : x) or (max-device-width: y)
Alternatively, post a URL so we can inspect the css
Good luck
I'm using the Semantic Grid System to build a responsive site. However, something isn't quite right with the media queries that should obviously kick in once it hits a particular screen size.
I'll reference what i mean with their example on the website : if I view this on my iPhone for example, given that it is supposed to adjust to a single column structure on a mobile device, it still throws out the web version of the page. That is true for both Safari and Chrome on my iPhone. However, if I use the RWD bookmarklet to check it's appearance at different resolutions it appears as expected for the mobile resolution. Also, ironically, if I resize the page in Safari on my desktop it also adjusts accordingly once I get down to the approriate screen size, but not in Firefox.
The media query that it uses once it hits 720px is
#media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
.column(12);
margin-bottom: 1em;
}
}
and I might be wide of the mark here but I think that must be the issue. But given that this is directly from the semantic.gs website I don't think I have the expertise necessarily to question their own code.
Any idea what the problem might be?
The behavior that you describe can be the result of not using the 'viewport' meta tag in your markup:
<meta content="width=device-width" name="viewport">
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/