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?
Related
<meta name="viewport" content="width=device-1200">
Website view does not show according to above width on iPhone but working fine on android
Usually iphones have problems with view port. i see that there is some problem with the view port you are using. on android and other PC, browsers reads and fixes viewport automatically. but not in phones so you need to fix your view port metatag
. try the one I gave below.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have a website that uses Bootstrap3 and mvc5. Its full responsive but wanted to add a little something extra with the ability to save to home page and present it as a web app.
I did all the correct head tags
<meta name="apple-touch-fullscreen" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
and added the javascript from https://github.com/stylr/iosweblinks to prevent the a links from opening in safari.
The issue i have is when a link is called it refreshes the entire page. The top nav menu refreshes and reloads every time. It looks like crap. When in safari it doesnt do that. Its nice and smooth.
Has anyone experienced this?
We are using the select2 plugin (http://ivaynberg.github.io/select2/) for dropdowns in our website - basically we are having an issue where it tries to zoom in on the selected text element within the drop down if clicked - this happens on IOS mobile devices.
I have tried to counteract this by using the following meta tag -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Although the page now doesn't scroll - it still zooms when clicked. has anyone had any similar issues
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 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" />