I have a blog website where I used the viewport property to scale the site in mobiles, it was working perfectly using:
<meta name="viewport" />
Then it stopped working for no reason, didn't touch the code at all. Now I've been trying with everything I find online, from max-width to initial-scale, etc. Still doesn't work.
What could be happening? Is there any update that cancelled the viewport property?
My website: www.fake-leather.com
If you are not coding a responsive site, just don’t use any meta viewport. If you are coding a responsive website, all you need to write is
<meta name="viewport" content="width=device-width, initial-scale=1">
Any additional parameters in the content attribute usually screw up user’s experience.
Reference: Stop using the viewport meta tag (until you know how to use it)
Related
I'm experiencing a serious problem with viewport metatag while browsing on mobile.
Adding this line to my <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Makes the whole site display everything 10x bigger, won't display background images at all.
What am I doing wrong? This only applies to mobile version.
After using metatag:
EDIT:
I'll add another screenshot to show exactly this same part of the page.
i think i found problem)
all of you query start from min-width >700px
you can write #media(max-width: 968px) - and all must work fine
play with query rules
I have designed my site to be responsive without actually using
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It looks just the way I want it on mobile. The problem is, when I go to Google Insights, which to test if my site is mobile optimized, it says it is not. When I add the meta tag, it says my site is mobile optimized (even though it looks a lot worse to a human being).
My question is, can get around using the meta viewport tag while still having Google Insights tell me my site is mobile optimized and therefore adding that SEO benefit.
You don't want to be setting the viewport width to a specific size. This will make all devices view it as that set size.
Change it to 'device-width' like below and it will size to the devices width.
<meta name="viewport" content="width=device-width,initial-scale=1" />
I have the problem that my website is resizing correctly when I change the viewport in chrome or go to it directly on my phone.
It does work however when i just resize my browser window.
This is the website http://maxehlers.com/test/ if you would like to try it out.
Most stuff on the website is set up with percentages for with and height.
How can i make the website act responsively when accessing it from a mobile device? Do I have to add media queries?
I think you are missing the viewpoint meta tag
here are the docs on MDN
something like <meta name="viewport" content="width=device-width, initial-scale=1"> should sort it.
There is more good info here on css tricks on resposive tags
I'm using meta tags to scale a site.
It's for a demo on an iphone, so best practices can be ignored.
For some reason the scaling does not seem to change when I change the page from landscape to portrait. (I'm not talking about switching while rotating, I'm talking about full page reloads in a different orientation).
I'm testing the site in the iPhone simulator.
Am I missing something simple?
<meta name="viewport" content="width=320; initial-scale=.675">
<meta name="viewport" content="width=480; initial-scale=1">
Why are you using two viewport tags? These are not if-then statements; you should set the viewport value once. As it stands I would expect the second one to override the first (though really, anything can happen).
Also don't confuse width with device-width. Might help to reread http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
I am designing a mobile website and I first tried just to use a regular html page with a h1 tag. It looks very tiny so I searched and found out that I need to add these lines:
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
After trying several web pages to understand it, I still am confused. Is the viewport an additional device-width that on for example iPhone is 960px? Even though the iPhone 4 is only 640px so it scales it down to emulate that size? So in order to prevent it from thinking the viewport is 960px it says that it is equal to the size of the screen?
If this is the case, does other browswers/devices such as Android running devices have different widths (other than 960px)?
Per the jquery mobile documentation, there is a bug for iOS with this:
There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but
this will hopefully be fixed a a future release. You can set other
viewport values to disable zooming if required since this is part of
your page content, not the library.
They recommend the follow line:
<meta name="viewport" content="width=device-width, initial-scale=1">
You also don't need the user-scalable either, the above line won't disable user zoom.