I am trying to get a site with a fixed side nav working on the iPad. I realized that iPad doesn't support position:fixed very well, so the side nav just scrolls up with the rest of the page. Is there a decent workaround for this? There is no time to redesign the site for iPad before the launch.
Thanks!
You can use a fixed position, but you have to make sure that the meta-tags are set correctly.
Example:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Related
I have been getting reports from a couple of users "Android users in most cases" that the website is opening as a white screen on their phones.
After some troubleshooting, I found out that if you zoom out and scroll around, you will find the actual website.
When you open the website, the viewport is showing a large white screen and the actual website is inside it.
I added this to the header.php <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1"> and its not getting fixed.
Any idea why and how to lock the website content to the viewport cadre?
Screenshot sent by users: when they first open the website
Screenshot sent by users: After they scroll right and zoom out a bit
Edit:
First try changing your viewport tag to this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You could try adding the following CSS:
body {
width: 100vw;
overflow-x: hidden;
}
You could also try disabling zoom by adapting your viewport tag with the following:
maximum-scale=1.0, user-scalable=no
You might also want to look at the CSS touch-action property:
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
I've designed a bootstrap 3 site and had tested it exclusively with chrome v40.
I then opened the site with Firefox 36. The layout was zoomed out and had gone all awry but after reducing the zoom to 80% it looked just like it did on chrome.
How can I handle this?
Try to add this to your index
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
this is my site. http://losroblesrestaurant.com.ar/index7b.php. When displayed on a phone the menu doesnt fit on the screen. I need it to be viewd at 347 px width. I have already tried with media queries and viewport but it doesn't seem to work.
I have tried
<meta name="viewport" content="width=700, user-scalable=no">
<meta name="viewport" content="width=80%, user-scalable=no"> and
<meta name="viewport" content="width=device-width, user-scalable=no">
none of wich make any difference at all
I am not allowed to post images, so please check this: http://losroblesrestaurant.com.ar/images/iphone-problem.jpg
The code for the phone has
body{min-width:347px;}
EDIT:
You set a fixed min-width on .inner. You need to remove it.
You also have a width of 990px on .inner-blanco. Change it to 100%.
Hi I just started develop applications for mobile devices, Have the next trouble. This site: http://dimax.co.il/development/test-ding/OscarWilde/#/menu dispalyed correctly on PC browsers, but on Safari on iPhone 4S, it should be displayed full screen but it much less then full screen. All css you can see there. Thanks for help.
Ensure you have view port set in your head section
<meta name="viewport" content="initial-scale=1.0">
A more complete answer for mobile sites would be:
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />
I need some help. I have made this side in Joomla, and cant get my footer to have a 100% width on an Ipad. Its like it wont get furder then my footer content.
Can some one please help me adding the right css?
My website is: www.webkjaer.dk
And here is the Ipad emulator
Try adding this to your website head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">