When using
<meta name="viewport" content="width=device-width, initial-scale=1"/>
My site still zooms in to top left on mobile devices.
This is the site: http://www.goodmoodistan.com/p/final1413.html
Any ideas?
Thx
You just try only width in meta tag like following:
<meta content="width=device-width" name="viewport">
You can set the minimum and maximum amount the visitor can zoom
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, initial-scale=1.0">
Related
Well, I can't release the URL for the site (not live yet), I was running into issues where the website won't scale to the device screen. For instance, I want the entire website to fit on a mobile, and tablet device without user having to manually scale it down. However, when you view the site, it's zoomed in. Below is the viewport tag I'm using. Any ideas?
<meta name="viewport" content="width=device-width, initial-scale=1">
There is no max-device-width value for width. It has to be only device-width. So it should look like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Thanks in advance...
I've built a site that is responsive and has a mobile friendly version.
The problem I'm having is, on my Nexus 4, an iPhone, and most other Android devices I've tried, it displays fine...but on a Samsung Galaxy S2, it zooms right in and the layout is a mess.
I've got the viewport meta tag, I've tried the following, to no avail:
<meta name="viewport" content="user-scalable=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1" />
<meta name="viewport" content="user-scalable=no, width=480, initial-scale=1" />
All bad on the Samsung!
Can anyone see the problem and help it's driving me mad!
The site in question is dsimcockandson.com if you want to see the source.
Thanks
Starting at line 1083 in your CSS you have:
.hide {
display: ;
text-align: center;
}
Is the missing value for the display property intentional?
I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view.
What could be the wrong?
You are probably missing the viewport meta tag in the html head:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it the device assumes and sets the viewport to full size.
More info here.
I have also faced this problem. Finally I got a solution.
Use this bellow code. Hope: problem will be solve.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Though it is answered above and it is right to use
<meta name="viewport" content="width=device-width, initial-scale=1">
but if you are using React and webpack then don't forget to close the element tag
<meta name="viewport" content="width=device-width, initial-scale=1" />
Responsive meta tag
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I`am developing a responsive website, when i view the site on mobile emulators and re-size the browser all responds perfect but when i look on actual mobile device the site does not resize
Here is my HTML head
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"></head>
here is my CSS
#media handheld, screen and (max-width: 768px), screen and (max-device-width: 768px) and (orientation: portrait) {{css styles}}
Any one help ??
Remove the media query for handheld, these days mobiles fall under the screen area.
Check out http://mediaqueriestest.com to find out exactly what your current device is responsive to.
Use the following code in head section:
<meta name="viewport" content="width=device-width, initial-scale=1">
Please check the page.
When opening the page, BlackBerry Bold automatically zooms in the page. While the situation is fine on iPhone.
I had tried
<meta name="viewport" content="width=1020">
<meta name="HandheldFriendly" content="true">
or
<meta name="viewport" content="width=device-width">
<meta name="HandheldFriendly" content="true">
but BlackBerry Bold still automatically zooms in the page.
BlackBerry Bold is supposed to act like how iPhone does. Is there a workround to this issue?
Can you try specifying the height and the width? Some thing like this,
Thanks
Naveen M