我知道这是一个愚蠢的..但是将html和body标签的高度设置为100%并将padding和margin调整为0并没有解决它!
这是我的代码:
<!DOCTYPE html> <html lang="e"> <head> <Meta charset="utf-8" /> <title>Musterportfoliovergleich</title> <Meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="stylesheets/index.css" type="text/css"> <!--<link rel="stylesheet" href="stylesheets/jquery.mobile.css" type="text/css">--> <script type="text/javascript" src="javascripts/jquery.js"></script> <script type="text/javascript" src="javascripts/jquery.mobile.js"></script> <script type="text/javascript"> $(document).ready(function() { console.log("Hello"); }); </script> </head> <body> <div id="pieChartCont1" class="container"> Pie Chart Container 1 </div> <div id="barChartCont1" class="container"> <div id="barChartCont"> Bar Chart Container </div> <div id="recBut"> recBut </div> </div> <div id="pieChartCont2" class="container"> Pie Chart Container 2 </div> <div id="recCont" class="container"> Recomendations Container </div> <div id="barChartCont2" class="container"> Bar Chart Container 2 </div> </body> </html>
CSS
html,body{ width:100%; height:100%; margin:0; } #pieChartCont1{background-color:red} #barChartCont{background-color:green} #recBut{background-color:blue} #pieChartCont2{background-color:yellow} #recCont{background-color:purple} #barChartCont2{background-color:orange} @media only screen and (orientation:portrait){ .container{ width:100% } #pieChartCont1{ height:45% } #barChartCont1{ height:10% } #barChartCont{ width:80%; height:100%; float:left; } #recBut{ width:20%; height:100%; float:left } #pieChartCont2{ height:45% } #recCont{display:none} #barChartCont2{display:none} } @media only screen and (orientation:landscape) and (max-device-width:700px){ .container{ height:100%; float:left; } #pieChartCont1{ width:45% } #barChartCont1{ width:10% } #barChartCont{ width:100%; height:80% } #recBut{ width:100%; height:20% } #pieChartCont2{ width:45% } #recCont{display:none} #barChartCont2{display:none} } @media only screen and (orientation:landscape) and (min-device-width:701px){ .container{ width:50%; height:50%; float:left; } /*#pieChartCont1{}*/ /*#pieChartCont2{}*/ #recCont{ clear:both } /*#barChartCont2{}*/ #barChartCont1{display:none} }
我想到了! jQuery Mobile脚本只是弄乱了视图.
解决方法
设置百分比充其量是最好的.根据我的经验,我更喜欢使用JavaScript函数来获取页面宽度和高度,并将div维度设置为像素,而不是百分比.将ids设置为您要格式化的HTML元素,并使用document.getElementById来调整它们的大小.
var container = document.getElementById("container"); var barChartCont = document.getElementById("barChartCont"); //...and so on... var viewportwidth; var viewportheight; function resize() { // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight if (typeof window.innerWidth != 'undefined') { viewportwidth = window.innerWidth,viewportheight = window.innerHeight } // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { viewportwidth = document.documentElement.clientWidth,viewportheight = document.documentElement.clientHeight } // older versions of IE else { viewportwidth = document.getElementsByTagName('body')[0].clientWidth,viewportheight = document.getElementsByTagName('body')[0].clientHeight } container.style.height = viewportheight+"px"; barChartCont.style.height = (0.8*viewportheight)+"px"; //and so on... }
<body onload="resize()" onresize="resize()">
并且当页面加载时将调用此函数,并在每次调整页面大小时再次调用此函数(以更新< div>或您正在使用的任何HTML标记的尺寸.)这样,您将拥有实际像素尺寸,而不是百分比.
尝试一下,如果您遇到问题请告诉我.我在编码历史中多次使用过这个剧本,它已成为我最喜欢和最常用的剧本之一.