모바일에서 화면 크기에 따라 메뉴 이미지도 크게 할 수 있나요?
정말 간단한 페이지 만들려고 하는데 모바일에서 ul ui 써서 이미지 걸고 메뉴를 만들었는데
이거 화면크기가 320으로 고정으로 되어 있는데 모바일기기의 화면이 크면 오른쪽이 잘려
나오거든요....그래서 모바일기기의 화면크기가 커지면 픽셀 늘어나도 상관없으니 메뉴크기도 같이 늘어나게 하는 방법이 있나요?
아래는 원래의 소스입니다.
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Imagetoolbar" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-
scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<link rel="stylesheet" href="event.css" type="text/css" media="screen" />
<style type="text/css">
ul{list-style:none; float:left; margin:0; padding:0;}
li{list-style:none; float:left; margin:0; padding:0;}
</style>
</head>
<body>
<div>
<ul>
<li><a href=index.html><img src="./images/main.jpg" style="width:100%;
display:block;" alt="" border=0></li>
<li><a href=intro.html><img src="./images/intro.jpg" style="width:100%;
display:block;" alt="" border=0></li>
<li><a href=price.html><img src="./images/price.jpg" style="width:100%;
display:block;" alt="" border=0></li>
<li><a href=map.html><img src="./images/map.jpg" style="width:100%;
display:block;" alt="" border=0></li>
</ul>
</div>
어떻게 해야 할가요;;;; 샘플페이지는
http://www.seouly.com/newgosm
접속하시면 됩니다....
이거 화면크기가 320으로 고정으로 되어 있는데 모바일기기의 화면이 크면 오른쪽이 잘려
나오거든요....그래서 모바일기기의 화면크기가 커지면 픽셀 늘어나도 상관없으니 메뉴크기도 같이 늘어나게 하는 방법이 있나요?
아래는 원래의 소스입니다.
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Imagetoolbar" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-
scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<link rel="stylesheet" href="event.css" type="text/css" media="screen" />
<style type="text/css">
ul{list-style:none; float:left; margin:0; padding:0;}
li{list-style:none; float:left; margin:0; padding:0;}
</style>
</head>
<body>
<div>
<ul>
<li><a href=index.html><img src="./images/main.jpg" style="width:100%;
display:block;" alt="" border=0></li>
<li><a href=intro.html><img src="./images/intro.jpg" style="width:100%;
display:block;" alt="" border=0></li>
<li><a href=price.html><img src="./images/price.jpg" style="width:100%;
display:block;" alt="" border=0></li>
<li><a href=map.html><img src="./images/map.jpg" style="width:100%;
display:block;" alt="" border=0></li>
</ul>
</div>
어떻게 해야 할가요;;;; 샘플페이지는
http://www.seouly.com/newgosm
접속하시면 됩니다....
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 3개
해당 스크립을 head.php나 head.sub.php 에 적용해보세요
<script type="text/javascript">
<!--
ad_check_mobile = '';
var adStrUserAgent = window.navigator.userAgent;
if(adStrUserAgent!= null)
{
if(
adStrUserAgent.indexOf("Android") != -1 || //Android
adStrUserAgent.indexOf("SAMSUNG") != -1 || //samsung
adStrUserAgent.indexOf("PSP") != -1 || //psp
adStrUserAgent.indexOf("PLAYSTATION") != -1 || //playstation
adStrUserAgent.indexOf("lgtelecom") != -1 || //LGT
adStrUserAgent.indexOf("Smartphone") != -1 || //스마트폰
adStrUserAgent.indexOf("Symbian") != -1 || //심비안폰
adStrUserAgent.indexOf("PPC") != -1 || //??
adStrUserAgent.indexOf("Windows CE") != -1 || //PDA
adStrUserAgent.indexOf("iPhone") != -1 || //애플폰
adStrUserAgent.indexOf("iPod") != -1 ) //애플
{
ad_check_mobile = 1;
}
else
{
ad_check_mobile = 0;
}
ad_check_mobile = 0;
}
//-->
</script>
테스트해본결과 화면 크기(?)비율에 따라 적용은 되더군요
즐거운 하루 되세요