The problem I have is very specific and quite hard to detail unless you have a mobile device.
I've been working on making my website responsive recently and on desktop it works pretty well. I've just had a few people test it on mobile (Android and Windows Phone) and they're telling me that there's quite a lot of negative space, as if it's zoomed out.
Looking at my code, I have no idea why this is happening. Can anyone perhaps enlighten me?
Here is the question
Try changing your viewport tag to something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Related
I made my site responsive using media queries and tested it by resizing my browser and it works fine. I also used a website to see how my page would render on apple devices, specifically iPhones, and the RWD worked. But when I looked at my site on an actual iPhones, or any other smartphone for that matter, it shows the page in "desktop mode"(i.e. not rendered with the media queries). Can someone please explain to me why this is? Sorry I don't have an example but I figured it's a common problem/fix. Thanks guys.
The first thing that comes to mind, as I've done it before, is did you forget your viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
I've built a site using media queries to make it responsive and whilst I've been developing it I have changed the width of the browser to test the page and the media queries seem to work fine with the break points I have set.
Problem is though, when testing the actual page on the iPhone, it doesn't seem to be recognizing the media queries at all and the full desktop view is shown in the browser instead.
Why ideas why an iPhone would do this, any mobile phone for that matter?
Here's the Litmus browser test result I have: https://litmus.com/pub/b78644d
Could take it a step further with
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I'd also recommend wiping out some of those !important(s), at least off of the widths you've set, so the responsiveness plays nicely.
Annnnnd Chrome has a sweet (relatively new) emulation tool built in that you can mess around with and use it to view your site scaled down to mobile as well - it's tucked in next to the Javascript Console.
Solved the problem adding this line to the head in the HTML:-
<meta name="viewport" content="width=device-width">
Been trying to debug this for a couple of hours. I've been asked to fix a "responsive" website that is really buggy. I can't share the actual code b/c it's all on localhost on a secured network. Hoping you might see something have a light bulb go off from my description here.
Problem, we have #media (max-width:800px) and it stops affecting page elements around 600px wide.
Another example, i set html{ max-width:1200px} but to make the browser actually fit my 1200 pixel browser window I had to set it to 2250px.
My question is, does this ring any bells for anyone? I'm going through all the CSS and don't see any thing that immediately looks like the issue. These guys really broke responsive design.. bleh
Thanks..
EDIT
here's the meta tags that apply
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
... bunch of junk...
<meta name="viewport" content="width=device-width, initial-scale=1"> (again)
With some help, I was able to resolve the issue.
Issue was related to pixel-ratio declaration but not in CSS, in minified Javascript...
Eliminating this unnecessary js made the page load as expected.
Core lesson: use javascript for functionality and CSS for design and layout.
I am trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.
I've created some media queries, that behave correctly in a browser when resizing on a desktop.
On my iPhone, safari just shrinks the entire website but still maintains the aspect ratio of the full sized site. How do I get the media query to be observed? have I missed something?
Here is a link to a sandbox which I am trying to get working correctly - any help or suggestions are appreciated:
http://www.preview.brencecoghill.com/
Do you have the meta for view port in your html?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More info here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
I think you'll find a warning in Chrome with ; instead of ,
This should work just fine:
<meta name="viewport" content="width=device-width, initial-scale=1">
I just experienced the most bizarre thing after troubleshooting this same problem for a day. Something to try if all else fails...
My pages were perfectly responsive on my laptop during development but not on my iPhone, iPad or Samsung. I finally discovered I had to put a comment line after the DOCTYPE statement and before the html lang statement, like this:
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
Finally, my pages were responsive on the mobile devices. Weird!
I'm developing a relatively simple website using a media query to target mobile devices (640px width and under) and when I view it on my archaic iPhone 3g it looks fine apart from the fact that there seems to be something that makes it primarily appear very "zoomed out"
It's probably easier to show you an example;
http://deanelliott.me/misc/berman/interior.php
I've only tested it on my iPhone so I'm not sure how it displays on other phones.
Any help would be most appreciated.
It appears your viewport settings are missing.
This is what I use:
<meta name="viewport"
content="width=device-width, initial-scale=1, target-densitydpi=device-dpi" />