I am trying to create a responsive design layout using XML that relies on setting the initial-scale of the user agent. In HTML I would use some variation of the <meta viewport> tag such as this:
<meta name="viewport" content="width=320, initial-scale=1">
however the lack of a closing tag is a problem for XML.
Is there a way for me to do this in valid XML that would also work in browsers?
Given this answer (which is specifically about closing the <meta> tag) I think the simplest thing to do here would be to just close the meta element with /> as browsers will not complain.
Use the XHTML namespace:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="width=320, initial-scale=1"/>
</head>
<body>
<!-- Insert your content here -->
</body>
</html>
OR:
<html:meta xmlns:html="http://www.w3.org/1999/xhtml" name="viewport" content="width=320, initial-scale=1"/>
References
Polyglot Markup: A Robust Profile of the HTML5 Vocabulary
Sample Page using Polyglot Markup
Related
<!DOCTYPE html> <!-- This lets the browser know it is a html5 document -->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Synta and Coding Style</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- This is the external stylesheet that links to the page and alters the feel and look of the page -->
1.close and tags.
2.select full address of your css or use base tag.
I currently have this as my base template, but depending on the route (using this as router)
, it has to switch out the css for another one, I tried but couldn't find a way to do this.
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css" />
<Title>Title</Title>
</head>
<body>
<div id="render-target"></div>
</body>
You cannot control the css file in meteor, because when the server starts, all the css files will be merged into one file. In order to define a css for a particular module, it would be better to use less or sass to define the namespace
I have just shifted from Atom text editor to Brackets , both are experimental and quite new i know :) , well i have a very basic question. Bracket definitly seems more refined and has been on the block for a longer time. Now in atom i used to create custom sinppets like so:
".source.html":
"HTML snippet":
"prefix": "spithtml"
"body": """<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title here</title>
<link rel="author" href="humans.txt">
</head>
<body>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</body>
</html>
"""
How would i create a simple HTML snippet in Brackets ? Thats my question , i surfed the net alot , some aspects of brackets is quite well Documented, some are not , I really can't find any documentation on how to create a custom snippet in Brackets , as that would really help my workflow.
Can anybody tell me how would i go about building a custom snippet in Brackets ?
Thank you.
Alex-z.
I'm not quite sure but probably you only need something like this:
https://github.com/chuyik/brackets-snippets
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
I am working on ipad application(using Asp.net framework and HTML5).
I can't do pinch-in and pinch-out of my application.
I have used the meta tag also but still it didn't help.
By default ipad provides pinch to zoom on safari. But for the application on which I am working on, its not happening at all.
Below is the meta tag which I am using
<meta name="viewport" content="width=device-width, initial-scale=1"/>
How can I achieve this?
Add minimum and maximum scale parameters to the meta tag, just like below
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0">
Try The below head section and let me know what happens,
<!DOCTYPE HTML >
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.6,user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="YES">
</head>
<body></body>
</html>
For solution have a look at these links:
http://chillburn.com.au/blog/enabling-the-pinch-zoom-for-the-ipad-iphone-while-using-jquery-mobile/
jquerymobile.com/test/docs/api/globalconfig.html