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
Related
I'm using bootstrap grids for my layout. When I make the width of my browser smaller the grid elements rearrange to accommodate. However if I view the site on my phone, or set the browser view mode to mobile device in developer options on chrome, the grid elements don't move, everything stays put but reduces in size, so I end up with a really tiny version of my site.
for my grids im using:
<div class='row'>
<div class='col-md'>content</div>
<div class='col-md'>content</div>
</div>
Am I using the -md part incorrectly. I like the the point at which it breaks on the browser but does this affect mobile as well?
edit: Just to add some peculiarities about my site.
It's hosted on Github, ie. MyName.github.io
Issue only occurs with the online version, offline the grids rearrange fine.
Im using a domain to forward to my github address, ie. Myname.com -> myname.github.io
Just incase this can affect anything
That sounds as if you didn't insert the viewport tag, so mobile devices will zoom your website to fit into the screen as is. Put this into the headsection of your html code:
<meta name="viewport" content="width=device-width initial-scale=1.0" />
Found the issue.
I am using a forward on my domain with masking to another address. This displays the site in an iframe in the original domain domain.
If i visit the domain i'm directing to directly, everything works dandy.
I'm currently trying to use CSS media queries to optimise my website for mobile view, and am using Google Chrome with an extension to resize the viewport on my desktop to adjust my content for mobile.
The problem I'm having is when i'm designing and changing on my laptop at the mobile phone resolution, everything works fine (see first picture) but when I actually load the website on my mobile, I'm not getting the same view as what I'm getting from the laptop (see second picture).
I've used
<meta name="viewport" content="width=device-width, initial-scale=1">
to set my width for mobile
I know the font is different because it's a third party i've installed onto my laptop so thats not the problem.
Just wondering if theres any easier way of actually creating responsive views for mobile such as using applications like Phonegap or if anyone can give me tips on how to properly create responsive content for mobile.
Thanks in advance
EDIT:
The second picture is larger because it was as a screenshot from my mobile phone, the screen sizes aren't different.
I suggest watching the New Boston's Responsive Web Design Playlist:
He will teach you the important basic concept of a responsive design using percentage and also creating your own custom menu or button in a responsive mobile version(that makes it almost like a mobile app in a browser).
https://www.youtube.com/watch?v=yWgl3xXVlHI&list=PL6gx4Cwl9DGBaTsb1nse1UU48d_q7glGT
You should consider using bootstrap. It is a mobile first front-end framework for faster and easier web development
http://getbootstrap.com
#John Appleseed
use the Inspector
"Toggle device mode" or "Ctrl + Shift + M"
time you try your web site
and not just resize the page
I don't know your CSS but have a look at this
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I'm searching for a reason and a hint why my website (Link) is not shown correctly with responsive design (based on Twitter Bootstrap) on iPhone5 Safari Browser while it is completely working correctly on desktop using IE, Chrome or Safari. Also on HTC & Samsung Galaxy the website is working correctly.
By Googling I only could find 2 solutions which are
A) cleaning the cache of the browser and
B) using
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
Both doesn't fix the problem. Also simulating the iPhone 5 Device in Google Developer Tool shows the website correctly while in reality the page does not show the CSS design.
Here the:
False Responsive Design Screenshot
Any idea what I need to look for as I'm running out of possible ideas.
Based on the screenshot we moved away from the Iphone theory and discovered that there was simply a problem in one of the CSS files. We had a false symbol (?) in the file and this triggered that the full CSS was not loaded correctly. It seems though that all other devices were able to compensate the mistake.
Download bootstrap to your web server and include the path in the page, so don't have to rely on another source that could go down. This should fix your problem, if not, then just try Cordova. It is possible that your your phone is being blocked by the bootstrap site because the it is going over mobile network or something like that.
Source: Personal Experience
Regards,
PRO
I'm pretty new to web development and lately I have been playing around with media queries to optimise my web page when scaled down on various resolutions.
I use the responsive design view in Mozilla Firefox to test my website at different screen sizes but I am having a problem when actually coming to view on a mobile device.
As you can see by the two picture I have attached, when viewing on Mozilla Firefox on the same resolution as my phone (for testing) the display looks a lot larger e.g. the font-size seems to be larger than what it actually is when I view the page on my mobile device.
I've tried researching into how to optimise this without having to create seperate CCS sheets for various displays and would appreciate if someone could point me in the right direction.
Thanks in advance, Sam.
Image 1 : Firefox responsive design view
Image 2 : Mobile view
May be you are missing the viewport declaration?
<meta name="viewport" content="width=device-width, initial-scale=1">
If this doesn't work a fiddle might help see what the issue is.
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...