Filename and the icons in the top of a html page shriks when opened in mobile browser?
Question
i have a very simple layout where i have three icons in the right side of the HTML page and have hard coded the Heading in the middle. I am giving the size of heading in percentage :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<a href='#' style="position: fixed;top: 30px;right:30px;z-index: 1000;" id="import"><img src="images/upload.png"></a>
<a href="#" style="position: fixed;top:80px;right:30px;z-index: 1000;" id="models" ><img src="images/download.png" class="menuc"></a>
<a href="#" style="position: fixed;top:130px;right:30px;z-index: 1000;" id="dropdown" class="menuc"><img src="images/render.png" class="menuc"></a>
<div style="width: 100%;text-align: center;position: fixed;z-index: 100;background-color: #C2C2A3;height: 100%">
<span id="cannvasfilename" style= "position:fixed;left:40%; z-index: 100; color:#3C3C41; font-weight:bold; background:transparent;font-size: 200%;">Filename:Meshworks Test</span>
</div>
</body>
</html>
its a very simple page and u can see the layout using the link Test .
But when i am opening this HTML page in the browser , the icons shrinks and the heading also comes in small size.
So my question is that is there any way to set the size so that it automatically takes the page length and width and then set the size of the heading and the icons. ???
I am already giving the text size in percentage so i thought this will do the task. but no !
NOTE : you can check the link i have given. Its just a sample so don't see the alignments. Only the size variance is a issue.
It will come properly in your browser but try and open the link in your mobile phone browser. That is the issue !
What simple change i can do in the code to solve this problem ?
1 answers
solution1
0 2015-02-05 06:04:27
Okay, I'll answer my own question and close this question.
I used HTML meta tag in the head and the issue is solved.
<meta name="viewport" content="width=device-width, initial-scale=1">
It might help someone with the same problem!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.