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
Related
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">
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/
I am working on an ipad application.I am using asp.net framework with HTML5 and mobileJquery. Is there anyway to do this?
Thanks
If you are looking to add pinch zoom, you need to have a viewport tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
The old recommended way was:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
More information on this here: http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/
Also, another similar post here: javascript event for a mobile pinch/zoom action
Pinching can be affected by the user-scalable and maximum-scale values of your view port meta tag. Try the below line and let me know it works for you or not.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.6,user-scalable=yes">