I am still a rookie in programming, but I want to know how I can disable horizontal scrolling on mobile devices. As you can see on my webpage here the picture on the top is bigger than the device-width. I tried nearly all I could find in this forum, but nothing really helped.
I put <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1"> into the head,
tried body{overflow-x:hidden} in various combinations but nothing worked :/
Your website works on mobile Firefox and Chrome, but not on the Android standard browser. Maybe this browser needs user-scalable=no.
Just add it to your meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
This also works for me:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Related
I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view.
What could be the wrong?
You are probably missing the viewport meta tag in the html head:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it the device assumes and sets the viewport to full size.
More info here.
I have also faced this problem. Finally I got a solution.
Use this bellow code. Hope: problem will be solve.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Though it is answered above and it is right to use
<meta name="viewport" content="width=device-width, initial-scale=1">
but if you are using React and webpack then don't forget to close the element tag
<meta name="viewport" content="width=device-width, initial-scale=1" />
Responsive meta tag
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I am trying to disable user pinch zoom on a web page dedicated for mobile devices, i tried the following meta tags with no avail:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
I also tired this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
some of my older websites that used to succeed in disabling user pinch zooming before, no longer work anymore as of today.
I am not sure if there's any new standards for achieving the same effect, but i dont seem to find any newer solution on the internet that would work with iOS 13.3.
Using Bootstrap 4 skeleton, I have tried Bootstrap built in viewport meta tag which is
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and also used one custom meta from web research like
<meta name="viewport" content="width=device-width, shrink-to-fit=no, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
to prevent changing the display of website on Pinch and Zoom in, but in both ceases the website is still Pinch-able and Zoom-able in Safari browser in mobile. Tested on Android the web site is not zoom-able but it is on Safari. What am I missing?
Update your view port with following will work. it work for me.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I was looking to disable zoom on the puffin web browser on an iPad, and I came across this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
This tag disables zooming on safari on the iPad, but not on puffin. Is there something else I need to add to disable zooming on puffin?
I am having some issues with my viewport on the mobile version of my web site. All of my elements display and are re-sized correctly within the page, however the page extends much farther then the end of the content.
Is there a way to restrict the height of my view port? Or could this possibly be a different issue I am just not seeing?
After further testing this error only occurs on Android mobile devices. Are there any know issues with Android viewports?
Remove height=device-height, from
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<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" />
this is i found in your code
if you height=device-height, will fit the site vertical on the screen
may be you required the
<meta name="viewport" content="width=device-width">
only