I have inserted:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
into the header of my website, but it is not disabling the SCALE function on my macbook (haven't tested elsewhere yet) like it should be. I have tried the exact same code that is used in another theme I used before but it still doesn't work.
What could be the reason for this and how do I fix it?
another option is to use responsivem.js It would require you to specify everything in em, but you could write a script to replace all the px with em. check it out.
Related
The meta tag is not reacting to a mobile (iphone) viewport as it should.
i guess it's connected to the full width image in the top of the site.
any help and suggestion of how i can solve this?
you can see the site at this adress:
http://alonashkenazy.co.il/
This is not wrong, because using multiple meta tags with the same name is valid HTML:
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1">
But we don't know how search engines and other readers will interpret them. Either two meta tags will be concatenated or one of them will be ignored/overwritten.
To avoid possible problems I would recommend to use a single meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
P.S. For more mobile site usage get more info from HTML5 Mobile Boilerplate template
this is my site. http://losroblesrestaurant.com.ar/index7b.php. When displayed on a phone the menu doesnt fit on the screen. I need it to be viewd at 347 px width. I have already tried with media queries and viewport but it doesn't seem to work.
I have tried
<meta name="viewport" content="width=700, user-scalable=no">
<meta name="viewport" content="width=80%, user-scalable=no"> and
<meta name="viewport" content="width=device-width, user-scalable=no">
none of wich make any difference at all
I am not allowed to post images, so please check this: http://losroblesrestaurant.com.ar/images/iphone-problem.jpg
The code for the phone has
body{min-width:347px;}
EDIT:
You set a fixed min-width on .inner. You need to remove it.
You also have a width of 990px on .inner-blanco. Change it to 100%.
In particular, I'd like to add
<meta name="viewport" content="user-scalable=no, width=device-width, maximum-scale=1, initial-scale=1, minimum-scale=1">
and when I insert it into the head from JS, I'm still able to scroll horizontally on mobile browsers, so I'm guessing it needs to be in the head a load time.
Place it in a <head> block outside of a <template> tag in any .html file.
Try using inject-initial atmosphere package to have your meta tag present on the initial load.
I wanted to disable zooming on my Webpage.
Therefor I used this:
<meta name="viewport"
content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
This works just fine on my iPhone but when I try this with my LG Optimus 4x, I am still able to zoom!
Does anyone know a solution to this problem?
The problem I have is very specific and quite hard to detail unless you have a mobile device.
I've been working on making my website responsive recently and on desktop it works pretty well. I've just had a few people test it on mobile (Android and Windows Phone) and they're telling me that there's quite a lot of negative space, as if it's zoomed out.
Looking at my code, I have no idea why this is happening. Can anyone perhaps enlighten me?
Here is the question
Try changing your viewport tag to something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">