[英]how to set the body width according to screen resolution using javascript?
如何使用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>
提前致谢。
只是为了让您知道screen.availWidth可能不会返回与您当前屏幕分辨率匹配的值，因为css像素与设备像素不同。 为了获得与屏幕分辨率匹配的值，请尝试此操作
screen.availWidth * window.devicePixelRatio
如何根据用户屏幕的分辨率设置面板的宽度和高度？
[英]How to set width and height of a panel according to the resolution of the user screen?
打开不带地址栏和标题的javascript弹出窗口，标题和高度和宽度根据屏幕分辨率按百分比设置
[英]Opening javascript popup window without address bar and title with height and width set in percentage according to screen resolution
如何根据屏幕分辨率设置页面宽度并在调整浏览器大小时水平滚动页面的其余部分？
[英]how to set the width of the page according to the screen resolution and scroll the rest of the page horizontally when the browser is resized?
Javascript媒体查询：如何根据屏幕宽度运行脚本？
[英]Javascript media queries: How to run script according to the screen width?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.