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" />
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">
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
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 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 having strange issue. I completed a website and was using screenfly from quirktools to see how it would appear on tablets and smartphones..... it look fine
When I viewed the site on a smart phone or tablet in real, it was showing the site in desktop version ... media queries are not working ... I tried chrome, firefox, opera all on my phone but non of them is showing my site in mobile version.
Friends can you tell me what can possible be wrong ?
I am using simple media queries in my css file
Did you set a meta tag for the viewport? Something like:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Place this meta tag in between
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
You can also Try out this meta tag which will make your media Query work on all size of devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Thanks