I want to be able to zoom in on and scroll an image but not have it affect buttons floating on top. Is this possible?
I've had success with scrolling and zooming by setting the html's viewport meta tag:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.1, minimum-scale=1.1, maximum-scale=1.8, user-scalable=yes"/>
Related
So my website has all of what everyone says to add when it comes to the head area:
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
However it doesn't work.
Instead, I'm getting this zoomed-in website that has the scroll bar on the right side(supposed to) AND one on the bottom (it isn't supposed to have a scroll bar on the bottom.)
Some perhaps useful info:
width:1920px
height: 3742px
IMAGE LINK:
https://ibb.co/W53qHnq
Code:
https://docs.google.com/document/d/1FpUiJsbVPp5Q33sa91lMJ9QYMU1cf8jHwkmlnzP33Y8/edit?usp=sharing
IMHO, the problem is your background image is too big, exceeding the viewport. You need to style the image to fit in the viewport. Exact code depends on your current image code, please provide.
Also, set overflow: hidden on the wrapper/container of the image to hide both scrollbars or overflow-x: hidden to hide just the horizontal scrollbar.
I'm working on a web application where the layout has three sections like Header, Middle Section and Footer. The Layout height is fix as per device screen and scroll will be in middle section only if the content will have more height than middle section's height. So I've applied this meta tags for hiding safari's default elements:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-title" content="BestForming">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
But after applying this and when I'm checking in real device I can't find any change in layout it's still display the default elements.
Thanks In Advance...
These metatags are for progressive web apps. You can see the change of these tags only when you do the following steps,
Click options and select, 'Add to Homescreen'.
Provide a name and save.
Exit the browser
Click the new icon which is now available in the menu
Now you can see your web app in home screen without the address bar.
I was building a non-responsive website whose minimum width is 1600px. How to center all content and let all content be visible while viewing on mobile? I set the meta viewport to <meta name="viewport" content="width=1600">, but the content is not center on mobile. And there is a horizontal scrollbar appeared. (on iphone 5) Thank you.
Use <meta name="viewport" content="width=device-width, initial-scale=1.0"/> to render the web page in respect to the mobile display.
My website has white empty space on the right side, on a iphone for landscape (on Chrome). I tried adding this in the head section(but its not helping):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
wrapper has 100% width
for portrain it's ok, but foe landscape appear white space
attach sreenshots
It's very possible that you have an overflowing element on the right side. Maybe a fly-out navigation, or maybe just an errant element. If you can SCROLL horizontally to it, there's a great chance that this is your issue.
If you are having trouble finding it, try Firefox's 3d view. I use that junk all of the time to find those sneaky overflowing elements.
I have a mobile website but it loads zoomed out. How can I fix this.
You should insert the Viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
This means that the browser will (probably) render the width of the
page at the width of its own screen. So if that screen is 320px wide,
the browser window will be 320px wide, rather than way zoomed out and
showing 960px (or whatever that device does by default, in lieu of a
responsive meta tag).
Reference: Css-Tricks - Responsive Meta Tag - MDN - Using the viewport meta tag to control layout on mobile browsers
You might need to set the viewport
<meta name="viewport" content="width=device-width, initial-scale=1" />
http://davidbcalhoun.com/2010/viewport-metatag/