We have built a website using Bootstrap 3.3. The website appears fine On Desktops and Tablets and on Android devices, but on Iphones it seems to load the website zoomed.
i did put the below meta tag
<meta name="viewport" content="width=device-width" />
If i put initial-scale=1 or minimum-scale = 1 or maximum-scale = 1, the website loads zoomed on both iphone and android. If i do not have them it loads zoomed only on iphone.
Can anyone suggest what the issue is and how i can resolve it
how to use viewport
The page is not responsive ... it is a real shame! Google it will take into account and will penalize your rankings
English info about the viewport meta tag
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Naviego is right. I know by your comment that your client wants to have the responsiveness removed but whats the reason? He is right that google will penalize your ranking if your website is not mobile friendly. You should check it out..
https://www.google.com/webmasters/tools/mobile-friendly
I tested it for you, and it says that your content is too big for a mobile screen, as you can scroll to the right.
Related
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.
juniorgoldreport.com is the website I'm working on and it's made in wordpress.
I'm using this plugin specifically - http://shiftnav.io/free/
The plugin for mobile nav bar is incredible, I enjoy it's functionallity and ease of use greatly.
It has a setting to set when to show the toolbar, I chose to show it at 960px. The only change that I have done to it.
When I resize my desktop window, the navbar apears (I haven't done the necessary changes to remove the header and old nav when making the new one apear). So far so great.
The issue is, on mobile view, the navbar doesnt apear. I'm going to assume the plugin is using
#media (max-width:960)
vs
#media on screen and (max-device-width:960)
But I'm not totally sure. Anyone have any idea's as to why it's happening?
EDIT - images to get you a better understanding.
The nav bar when a desktop window is rezied - it apears (yay)
The nav bar DOES NOT apear on mobile devices though - I'm not sure why
In short: your site is not actually responsive, because the viewport meta tag is missing, so the site displays at a 960px width on mobile devices. Since that is above the breakpoint, the menu does not display.
The issue is this typo in your site head:
<meta name"Keywords" content="Gold reports resource stock news and top gold articles"
<meta name="viewport" content="width=device-width">
The Keywords meta has two syntax errors a missing '=' after 'name', and a lack of closing >
As a result, the viewport tag is never read by the browser, so it has no effect. Without the viewport tag, the viewport is displayed scaled on a mobile device, rather than responsively. Since the mobile viewport is displayed at 960px width, the media query does not apply, and the menu remains hidden as it would on a desktop screen.
Fix the syntax errors in the first meta tag and the issue is resolved.
<meta name="Keywords" content="Gold reports resource stock news and top gold articles">
<meta name="viewport" content="width=device-width">
Hope that helps
I have the problem that my website is resizing correctly when I change the viewport in chrome or go to it directly on my phone.
It does work however when i just resize my browser window.
This is the website http://maxehlers.com/test/ if you would like to try it out.
Most stuff on the website is set up with percentages for with and height.
How can i make the website act responsively when accessing it from a mobile device? Do I have to add media queries?
I think you are missing the viewpoint meta tag
here are the docs on MDN
something like <meta name="viewport" content="width=device-width, initial-scale=1"> should sort it.
There is more good info here on css tricks on resposive tags
When I view my website on a mobile screen of iphone there is a white space on the right side of the screen and I can't figure out what is causing it. It seems to be only in the header section too.
Any suggestions?
Thanks.
URL
I see your site and i think that your site is work fine in browser but it create a problem with mobile your site is fully responsive and there not any white space in desktop resize but your media query not work in mobile so put this meta tag in your head tag and check again in mobile
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
try to add
margin:o;
if you post your code, i can provide you the accurate answer and one more thing not every one have IPhone lol :)
I have my site up at Isotope Labs.
It uses a mediaquery to detect mobile and set a mobile stylesheet (mobile.css) with body width of 100%.
The scripts.js file disables the jQuery scripts for mobile devices too.
It all works, except I can't seem to disable zooming on mobile devices properly.
I have used the following in my HTML head (after trying very many alternatives) to disable zooming for mobile:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimum-scale=1" />
On iOS and Chrome Mobile for Android, it still allows zooming. It does apply the mobile stylesheet, but it doesn't look quite right (text appears too small).
It actually works on Android's stock browser, although every time you hit refresh it alternates between looking right, and behaving exactly like Chrome and iOS.
I've gone through and deleted everything from the head, but even if I strip out all of the javascript and CSS, it still allows zooming.
This is driving me insane. Any ideas?
You appear to be setting the meta tag in a child frame, not the root page. When viewing the full-page frame url directly, zooming is prevented.