There is a strange activity with our sites, http://beta.bridalbook.ph when view in mobile.
When view in iOS the site don't pinch, but when view in android it pinch.
Can anyone help me with this issue?
Try adding user-scalable=yes to your viewport meta tag
<meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
to give you
<meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1", , user-scalable=no />
And I would move your Meta tage up near the top with the rest.
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">
Been looking on the web, but it seems like I'am the only one who has this problem.
It seems to me that the
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Only works with Google Chrome, but doesn't on Firefox (both in Device mode).
Anyone know the reason for this, and perhaps a solution?
Firefox has support for viewport meta tag in their mobile version 1.1 onwards. Can you try after removing the "user-scalable" attribute
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
My guess is this user-scalable attribute is not supported and causing problem.
<meta name="viewport" content="user-scalable=no,
initial-scale=0.5, width=610, height=1024" />
The mobile is small,so I wan't to scale html5 to 0.5.It takes no effect via phonegap,but it's OK via chrome on iphone 5.
Is it phonegap's bug?
--------------Edit----------------
I found that if I move off the code I showed above,the chrome will still do well on scaling.The pictures are showed smaller than desktop views.It's scaled by default.
But phonegap doesn't.
How to make phonegap scale my html5?
Try this
<meta name="viewport" content="user-scalable=no, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
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
Apparently i've screwed something up! After adding to home screen, I try to open the "app" and instead of using the iPhone rendering system with standalone mode etc, safari is opening it! It was working fine before, does anyone know what this could be?
Using JQM
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />