如何使用javascript ???
根据屏幕分辨率设置主体宽度我试过了
document.body.style.width = screen.width;
我只能设置像1920px这样的固定宽度。
我的意思是在stackoverflow等网站中，每个设备的屏幕宽度都是固定的。我想以同样的方式做事
我应该使用jquery吗？ html是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Fjalla+One|Gentium+Basic|Nunito|Hammersmith+One" rel="stylesheet">
<script src="https://use.fontawesome.com/ca51704d87.js"></script>
<script src="bg.js"></script>
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body onload="bload()">
<div id="header">
<img id="logo_head" src="src/logo_head.png" />
<p id="head">Kkv Martial Arts Academy</p>
<ul id="navhead">
<li id="subnav"><a id="link" href="index.html">HOME</a>
</li>
<li id="subnav">BRANCHES</li>
<li id="subnav"><a id="link" href="about_us.html">ABOUT US</a>
</li>
</ul>
<ul id="s2">
<li id="social"><a id="link" href="http://www.facebook.com"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
</li>
<li id="social"><a id="link" href="http://www.plus.google.com"><i class="fa fa-google-plus-official" aria-hidden="true"></i></a>
</li>
<li id="social"><a id="link" href="http://www.instagram.com"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<div id="picb">
<p id="greeting">KKV Martial Arts Academy.</p>
<p id="greeting2">One Place. Many Arts.</p>
<ul id=b>
<a id="link" href="karate.htm
l">
<button class="but1">KARATE</button>
</a>
<a id="link" href="slmb.html">
<button class="but2">SILAMBATAM</button>
</a>
<a id="link" href="kkv.html">
<button class="but3">KAALADI KUTHUVARISAI VARMA</button>
</a>
</ul>
<ul id="bcg">
<li id="dt1" onclick="dx1()">•</li>
<li id="dt1" onclick="dx2()">•</li>
<li id="dt1" onclick="dx3()">•</li>
</ul>
</div>
<div id="home1">
<h1 id="tit2">World Class Training.</h1>
<img id="certimg" src="src/cert.png" />
<p id="hom1inf">Certified by World Karate Federation™ and Japan Karate Federation™ .We provide world class coaching and implement discipline. We aim to increase mental strenght and physical resistance.
<br />
<br />
<button id=exp>Know More></button>
</p>
</div>
<div id="home2">
<h1 id="tit1">From the roots of Japan.</h1>
<img id="shot_kara" src="src/ska-logo.png"></img>
<div id="hom2inf">Learn Shotokan-the most traditional and influential style of Karatte. From <i>katas</i> to <i>kumites</i>, Shotokan made it's influence all over the world making it one of the widely practiced styles.
<br />
<br />
<button id=exp1>Know More></button>
</div>
</div>
<div id="home3">
<h1 id="tit1">Tamil Nadu's Iconic Art</h1>
<img id="sllogo" src="src/sllogo.png" />
<p id="hom2inf">Learn Silambam-one of the iconic art of Tamil Nadu.Derived from the Tamil Word <i>Silam</i> meaning hills and <i>Perambu</i> meaning Bamboo; Silambam imparts flexibility, agility, hand-eye coordination, kinesthetic awareness, balance, strength, speed,
muscular endurance, and cardiovascular stamina.
<br />
<br />
<button id="exp1">Know More></button>
</p>
</div>
<div id="home4">
<h1 id="tit3">The Indigenous Art Of Chola Dynasty</h1>
</div>
<h3 id="footer_title">Navigation</h3>
<ul id="navfoot">
<li id="footli"><a id="link" href="index.html">Home</a>
</li>
<li id="footli"><a id="link" href="karate.html">Karate</a>
</li>
<li id="footli"><a id="link" href="">Kaaladi Kuthuvarisai</a>
</li>
<li id="footli"><a id="link" href="">Branches</a>
</li>
<li id="footli"><a id="link" href="">About Us</a>
</li>
<li id="footli"><a id="link" href="">Contact Us</a>
</li>
</ul>
<h3 id="footer_title1">Contact</h3>
<p id="per2">Phone: <i class="fa fa-mobile" aria-hidden="true"></i>9444638400
<br />Email:
<i class="fa fa-envelope" aria-hidden="true"></i><a target="_top" id="link" href="mailto:ashwinkumar14102000@gmail.com?subject=Details%20about%20courses:%20KKV%20Martail%20Arts%20Academy">ashwinkumar14102000@gmail.com</a>
</p>
<h3 id="footer_title2">Connect:</h3>
<ul id="s3">
<li id="social"><a id="link" href="http://www.facebook.com"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
</li>
<li id="social"><a id="link" href="http://www.plus.google.com"><i class="fa fa-google-plus-official" aria-hidden="true"></i></a>
</li>
<li id="social"><a id="link" href="http://www.instagram.com"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
</ul>
<p id="per1">Designed by <a id="link" href="https://www.facebook.com/profile.php?id=100010842030822">Ashwin-Crypton.</a>
</p>
</div>
</body>
</html>
提前感谢。
答案 0 :(得分：0)
只是为了通知您screen.availWidth可能不会返回与您当前屏幕分辨率相匹配的值，因为css像素与设备像素不同。要获得与屏幕分辨率匹配的值，请尝试此
screen.availWidth * window.devicePixelRatio