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?
Related
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">
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
Some sites do not work in mobile browsers. Often this is caused by specific CSS attributes or missing HTML meta tags.
For example the HTML tag <meta name="viewport"...> is required for correct scaling of the page. Or the CSS attribute overflow: scroll; in a div on the page does not work on iPad as expected.
What specific Tags/Attributes does a HTML developer need to understand and use when enabling a page for mobile browsers?
The world is mobile, we as user interface experts have to rise to the challenge and face the future!
A couple of awesome resources to look at for developing mobile sites are the opera dev teams articles & W3C standards on CSS for Mobiles.
meta tags for mobiles
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">