Menu
I'm using the device metrics override in Chrome to test a responsive website for smaller resolutions (320x480 in this case).
My viewport meta tag is not making any effect on the page in this case. The logo will appear tiny, and I it's completely unreadable. More or less, I'd say I'm seeing everything in a .5 scale.
Here's the head of my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" / >
<!--[if lte IE 8]>
<style>
.wrapper {min-width: 960px; padding: 0 10px;}
.hovertext {background: #ccc;}
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
This does work on other people's sites.... I don't know what I'm doing wrong...
279
What does “The initial scale in the viewport meta tag is not working” mean? This means that the URL in question does not contain the initial scale in the HTML document. Or, this element is on the page, but you set it to a value other than 1.0.
Generally, meta elements (including viewport) should be placed in the document's <head> . CSS rules should either be added to a CSS stylesheet and referenced with a <link> element or, if you're not using stylesheets for some reason, in a <style> element (also in the document's <head> ).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Without the viewport meta tag.
What does “No viewport meta tag on the page” mean? This means that the page in question does not contain a viewporttag. Consequently, users who have entered your site from a smartphone will see a page not adapted for their devices. In this case, the text will be unreadable.
Try this in place of your meta tag. Good luck.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
