I am in the process of developing a responsive website which I am. For some reason when I resize the browser, responsiveness work good, however when I load the site on a mobile, the responsiveness is not working correctly.
This is the website:
http://rcb.com.mt/wordpresstesting/WebsiteTest/
I also run a test on an online responsive tester website and responsiveness is working too:
http://www.responsinator.com/?url=http%3A%2F%2Frcb.com.mt%2Fwordpresstesting%2FWebsiteTest%2F
I am using this plugin in my website: https://github.com/alvarotrigo/fullPage.js - Could it be something to do with a setting or a callback function in the script ?
Can anyone have a look for me and maybe discover why the responsiveness isn't functioning correctly.
the viewport tag in the <head> is missing, add this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
Related
I am making a react application. When I open the application in chrome browser, it gets zoomed in. I have to zoom out chrome to 75% to see the actual applicatio. In 100% my application looks all zoomed. Why is this happening and how can I solve it?
Check your head section for metatag declaration. Mostly there should be the problem with user-scalable value. It should be 1.0 for perfect result.
Here is the full code for correct meta tag
<!-- For 100% page rendering -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- OR
* To lock the zoom of the page -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
If its not working well for you, please share your website link to review further.
Created a responsive layout for website. Now client needs to add a button in footer to toggle between mobile view and desktop site. I used bootstrap for the front-end. I heard that the responsiveness handled with this code.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I tried with this code and test it. But no luck.
<span id="desktopswitch">desktop version</span>
$('#desktopswitch').on('click', function() {
$('#viewport').attr('content','width=1024, initial-scale=0, maximum-scale=5.0, user-scalable=1');
});
Any suggestions?
So created this nice app. Some testers go test. Some are older folks, don't have good eye sight. Want bigger font. So we make Settings Page: fonts for everyone.
Good, not problem. Everything text in css font-size has em. But is cordova app. So HTML is loaded quite a number of times. There goes Javascript DOM stuff.
Still not problem. We have view-port.
Are there other ways to do this? Quite a number of HTML parts are deleted and others are put back in, so to add a class to an element does not work.
This is how I solved it: It is not a changing of the font-size, it is an abibity for the user to zoom, or, actually: user-scalable=yes
Old:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Into:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=yes">
I want to hide url bar on IOS 7, so when I put <meta name="viewport" content="minimal-ui">, it don't hide url bar, its still on the page and my website is not loaded responsive , its opened like its desktop version, does anyone knows why is this happening and how to do this properly?
I even tried
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
I read this article and it looks like its not possible on new IOS. Link
Note that (as of now) minimal-ui only works on iPhone, not iPad.
Make sure your meta tag is hard coded on the page (or rendered server side).
Try adding a fuller list of attributes. I have the following and it's working across iPhone 4 and 5 with iOS 7.1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui">
I'm working on developing a mobile site and for whatever reason the page seems to load as if it is zoomed in every single time. I can scale it easily on a touch phone and it looks just about right, but I was wondering if anyone had any ideas of how to prevent this from happening.
I have tested this issue on Android and iPhone and it seems to be happening on both.
This didn't seem to help all except that I was unable to scale after the page loaded
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1">
You can try to use that :
That block pinch to zoom
<meta name="viewport" content="width=device-width, user-scalable=no" />
I would recommend the following meta, as it sets the page load zoom, rather than blocking the zoom function.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-Edit-
I didn't actually notice you already had initial-scale=1 in your meta. Try with '1.0' instead, I'm not sure if it will make a difference.