Hello I'm trying to make my website www.ecogo.io to show the whole page instead of certain portion of it but it loads up on mobile browsers like Chrome Android zoomed in (both with Desktop mode on and off)
Here is a screen shot
The viewport I'm using is:
<meta name="viewport" content="width=900, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=0">
change viewport from width=900 to width=device-width
<meta name="viewport" content="width=900, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=0">
to
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
I've started building a site for a friend, looks great on desktop, and great when I change the browser window size but seems to be zoomed out when I open it on my iPhone?
Any ideas why? Here's the link to the temporary site, if you change browser size to mobile that's how it should look.
http://torwood.footholds.net/~acoustic/
In the header you have:
<meta name = "viewport" content = "width=device-with, initial-scale = 0.1">
which is telling it to start with an initial zoom of 10%
Change it to:
<meta name="viewport" content="width=device-width, initial-scale=1">
Edit:
In fact, for best compatability you should include all the relevant headers:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: http://getbootstrap.com/getting-started/#template
I'm working on a website right now, it's tiniglesias.com ... and everytime I try to use my iphone to check it, it is automatically zooming in.
I've already deactivated all of my plugins to check if any of it is causing this to happen, but it is still zooming in.
I've also tried using the meta tag
<meta name="viewport" content="width=device-width" />
Still not working.
Help would be greatly appreciated.
Try:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Update:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
When I use WordPress Admin Panel in a Mobile browser such as iOS Safari or Android Chrome it allows me to pinch to zoom. When I checked the HTML I see that the below script is in the <head> which in the past has worked for me to prevent the user being able to scale.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Am I missing anything else here?
Thanks
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
It was missing
, user-scalable=0
I'm working on a responsive, Bootstrap 3-based design. When I resize the browser window on my desktop, everything behaves as expected, but when I went to look at it on my iPhone it doesn't collapse the menu as it should, among other things.
http://www.craftonhills.edu/Testing/ksimonso/Mobile_Site_Page
You need to add the viewport tag to your header:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You're missing the viewport meta tag within your <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I am using jQuery Mobile in PhoneGap. It is working fine in all browsers, but in mobile the view is very small.
I have used
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
in my html page, but then it is also very small.
just try
content="width=device-width, initial-scale=1"
Try this
enclose the below element in you head part.
<meta name="viewport" content="width=device-width, initial-scale=1">
You can find the below details in the following page.
http://view.jquerymobile.com/1.3.0/docs/widgets/pages/