2
HTML에서 웹 페이지를 사용자의 모니터로 확장 할 수있는 방법이 있습니까? 마찬가지로 나는 15 인치 있다고하지만, 다른 사람은 24 인치있다. 웹 페이지는 화면에 작지만 분당 적합합니다. 페이지를 100 % 또는 95 %로 확장하려면 어떻게해야합니까?웹 페이지의 너비를 자동으로 변경하려면 어떻게합니까?
A
답변
1
명시 적으로 크기를 설정하지 않는 한 페이지는 기본적으로 브라우저 창의 전체 너비를 사용합니다.
Firefox의 Web Developer 플러그인을 사용하면 브라우저의 창을 특정 크기로 빠르게 변경할 수 있으므로 레이아웃이 다른 크기로 어떻게 보이는지 확인할 수 있습니다. 당신의 CSS에서 다음
<div id="content">
<!-- Some content in here -->
<div>
:
#content {
width:100%;
}
이상의 제어 : 당신의 HTML에서 https://addons.mozilla.org/en-US/firefox/addon/60
0
당신의 모든 요소에 대해 특정 폭을 지정하지 않으면
#content {
min-width:500px;
max-width:1000px;
}
1
본문 또는 일부 div가 포함 된 웹 페이지는 브라우저 창의 너비까지 확장됩니다. 당신이 사용자의 폭을 픽셀 단위로 크기를 설정 찾고 있다면
, 동적 폭을 설정하기 위해 자바 스크립트를 사용할 수 있습니다
<script type="text/javascript">
var userWidth = screen.width;
var userHeight = screen.height;
</script>
그러나, 당신은 아마 자동으로 확장됩니다보다 유연한 레이아웃을 사용한다 백분율로 지정된 너비를 사용하여 (예 : CSS로 요소의 너비 설정 : width: 100%)
+0
이렇게하지 마십시오. 이제까지. IMHO, 이렇게하는 것은 pop-unders보다 약간 덜 성가시다. 사용자가 브라우저 사용법을 알고 있고 스크롤바를 원하지 않으면 자신의 창 크기를 조정한다는 점을 신뢰하는 편이 훨씬 낫습니다. – RBerteig
3
유체 너비는 백분율 단위 또는 em 단위를 사용하여 얻을 수 있습니다. 그리드와 컨테이너를 기반으로 사이트 레이아웃을 만드는 것이 전부입니다. Read more.
0
(텍스트) 내용의 의미를 설명하는 HTML은 단지 markup language입니다. 예를 들어 <h1>Foobar</h1>은 Foobar이 첫 번째 레벨 제목이지만 의미가있는 스타일에 대해서는 알려주지 않습니다.
HTML 문서의 스타일을 지정하기 위해 Cascading Style Sheets (CSS)이 도입되었습니다. 그러나 CSS는 단지 설명적인 언어이기도하므로 user agent에 대해 알지 못합니다. (특정 요소가 특정 폭으로 표시되어야한다고 설명 할 수 있습니다.)
그러나 JavaScript는 사용자 에이전트를 알고 있습니다. screen 개체를 사용하여 화면의 width 및 height 또는 사용 가능한 viewport을 가져올 수 있습니다.
0
밥이 모니터의 실제 크기 나 창 크기를 묻는 지에 대해 혼란이 있다고 생각합니다.
조쉬 스토 돌라 (Josh Stodola)와 리치 브래드쇼 (Rich Bradshaw)는 백분율을 사용하여 유체 레이아웃을 창으로 확장하는 HTML/CSS 응답을 제공했습니다. 다음 코드는이 기술을 요약하여 현재 브라우저 창 80 %를 차지하는 열과 20 %를 차지하는 두 개의 열을 만듭니다. 사용자가 창 크기를 변경하면 열 크기가 변경됩니다.
<html>
<head>
<style type="text/css">
#content1 {
background: #CC0000;
height: 300px;
width: 80%;
float: left;
}
#content2 {
background: #00CC00;
height: 300px;
width: 20%;
float: left;
}
</style>
</head>
<body>
<body>
<div id="content1"></div>
<div id="content2"></div>
</html>
Rudd Zwolinski가 사용자의 현재 해상도를 찾는 답을 제공했습니다. 다른 사람들은 이미이 방법을 사용함으로써 생길 수있는 잠재적 인 성가심을 게시했지만, 모르겠다. 어쩌면 해상도 크기에 대한 예술적 언급을하고 있을지도 모른다. 위의 코드는 위의 코드와 같습니다.
<html>
<head>
<style type="text/css">
#content1 {
background: #CC0000;
height: 300px;
float: left;
}
#content2 {
background: #00CC00;
height: 300px;
float: left;
}
</style>
<script type="text/javascript">
var userWidth = screen.width;
var userHeight = screen.height;
function resizeContent()
{
document.getElementById("content1").style.width = parseInt(userWidth * 0.8);
document.getElementById("content2").style.width = parseInt(userWidth * 0.2);
}
</script>
</head>
<body onload="resizeContent()">
<div id="content1"></div>
<div id="content2"></div>
</html>
희망이 있습니다.
2
모니터 인치를 기준으로 한 크기는 전 세계적으로 소프트웨어가 없습니다. 픽셀을 원한다. – tsilb
브라우저의 크기를 조정하면 사용자의 CRAP을 괴롭히는 확실한 방법입니다. 나에게 이것을하는 경비보고 도구를 사용해야한다. 대형 모니터를 사용하는 사람들은 일반적으로 창을 최대화해야하거나 필요로하지 않습니다. –
사람들을 괴롭 히며, 어리석은 의견을 게시하기 전에 질문을 읽으십시오. –