My bootstrap pages are designed responsively. The viewport is stated as required:
`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
(without the backticks)
In browsers I tested (Safari, Chrome, Firefox), the responsivity works well.
However, iPhones and other smarthphones always show the desktop view.
What am I doing wrong? This is a test page for you to see (sorry it's still a little cluttered):
http://zhaw.warnez-services.ch/NaKt/stackoverflow.php (LINK UPDATED)
Interestingly, using a Cloaking service, they send their own head and suppress my viewport instructions.
Thank you for any hints.
Viewport tag is not yet added.
Add <meta name="viewport" content="width=device-width, initial-scale=1.0" /> inside the <head></head> of your HTML/PHP.
The problem is/was the cloaking service. (nic.ch.vu).
It allows to hide the real address and camouflage it with a free and custom one.
If you choose the cloaking option, the address you typed in the address bar will never change, no matter what you click.
These services sent their own head sections, and the viewport tag gets suppressed for some reason.
If you run into the same problem, you must disable cloaking or use the real address.
Thanks to all posters for their help!
Well, seems that page you provided is missing the meta - viewport tag in its source.
your meta Tag is correct, uhmm i see you only have one css link ""... Question is it repressive? If not check out these tutorials on reponsive design helped me as well.
http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/
http://getbootstrap.com/css/
Hope that helps
Related
I have designed a fully responsive web page using Reactjs on the browser, but when I opened it on a real phone, there were things that are "off", although I designed it on the browser for the same phone. Why is that? I have that meta tag <meta name="viewport" content="width=device-width, initial-scale=1" /> set in the index.html. The problem with this I would never know how it would look like on the real device before deployment, which is time-consuming and tedious. Why is this happening?
The browser engine on your computer and on your phone might not be the same.
Are you using the same browser on both? like chrome??
If that is not the case, there will be some differences.
Hope that helps.
Question: what might be the cause of the iframe not working properly only on IOS, iphone?
It seems like it's zooming in automatically, but that is not the intention
How can this be fixed?
Sounds like the viewport issue to me.
I've seen this before... Here is a solution that might work for you in this case.
<meta name="viewport" content="width=device-width, user-scalable=no" />
Add/modify this tag in your and let me know if it works.
Note that by doing this you will be removing the option for the user to pinch and zoom on your site. Most the time you don't have to care about that but some users depend on the functionality.
I'm running Facebook Ads for one of my clients, however, his website is quite old and there are a few pages that aren't being responsive in mobile version. I know basic HTML & CSS, enough to do simple coding but am not sure where to start with this issue.
Issue: The linked pages are below with images attached. In mobile version the main content div is basically only taking up three quarters of the screen. The rest of the client's pages are fine (occupy the whole screen) when on mobile.
http://stkildafitnesstrainer.com.au/our-trainers.html
http://stkildafitnesstrainer.com.au/services.html
Thanks for your help
Edit:
Seeing the comments below, and as I was too young to care about disabilities. I'm sorry, this is the new answer:
Simple, add this in your head:
<meta name="viewport" content="initial-scale=1">
initial-scale, as the name says, define which scale your website will be rendered.
There is also other parameters to the content tag:
width=device-width sets the <body> width to be the same of the device, just like height=device-height is the same for height.
user-scalable=no, this says you are not able to zoom the page AND IT'S NOT RECOMMENDED, you can also set this parameter to yes.
I am testing out Bootstrap responsiveness navbar and I have a demo website. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons.
But when I tried it from a mobile browser (I tried it on chrome and internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.
Could anyone point out what I am doing wrong?
Add this to your HTML head..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
as suggested here http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
<meta name="viewport" content="initial-scale=1">
would be an even better choice as it makes going from portrait to landscape and back a much more pleasant user experience as with/height would adopt naturally because of the possible auto-scaling.
Adding this for people searching this error for whom the accepted answer is not working. I believe this will be a rarer, but nonetheless frustrating case:
If your page is rendering inside a frameset (for example domain cloaking), then putting the meta tags won't help. You would need to put them in the page on the cloaking domain, which you may or may not have access to depending on your DNS host.
Try clearing your browser's cache and open the page in a fresh tab. This sometimes resolves the issue for me whenever it happens.
I'm using meta tags to scale a site.
It's for a demo on an iphone, so best practices can be ignored.
For some reason the scaling does not seem to change when I change the page from landscape to portrait. (I'm not talking about switching while rotating, I'm talking about full page reloads in a different orientation).
I'm testing the site in the iPhone simulator.
Am I missing something simple?
<meta name="viewport" content="width=320; initial-scale=.675">
<meta name="viewport" content="width=480; initial-scale=1">
Why are you using two viewport tags? These are not if-then statements; you should set the viewport value once. As it stands I would expect the second one to override the first (though really, anything can happen).
Also don't confuse width with device-width. Might help to reread http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html