Question

如何使用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()">&bull;</li>
      <li id="dt1" onclick="dx2()">&bull;</li>
      <li id="dt1" onclick="dx3()">&bull;</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&trade; and Japan Karate Federation&trade; .We provide world class coaching and implement discipline. We aim to increase mental strenght and physical resistance.
      <br />
      <br />
      <button id=exp>Know&nbsp;More></button>
    </p>
  </div>
  <div id="home2">
    <h1 id="tit1">From&nbsp;the&nbsp;roots&nbsp;of&nbsp;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&nbsp;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&nbsp;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:&nbsp;&nbsp;<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>

提前感谢。

Answer 1

只是为了通知您screen.availWidth可能不会返回与您当前屏幕分辨率相匹配的值，因为css像素与设备像素不同。要获得与屏幕分辨率匹配的值，请尝试此

screen.availWidth * window.devicePixelRatio

如何使用javascript根据屏幕分辨率设置主体宽度？

1 个答案: