0
방금 1 &이라는 호스트 서버에 내 웹 사이트를 업로드했습니다. 내가 겪고있는 문제는 내가 설정 한 미디어 쿼리 규칙이 지금은 아닙니다. 작동/무시됩니다.모바일 또는 태블릿에서 CSS 미디어 쿼리가 작동하지 않습니다.
나는 내 아이폰 5 테스트를 마쳤으나 나의 웹 사이트는 확장되지 않았다. 그러나 바탕 화면의 브라우저 (Chrome) 크기를 태블릿 및 모바일 크기로 조정하면 올바르게 조정됩니다.
브라우저 크기를 조정할 때 완벽하게 작동하지만 모바일 장치에서 테스트 할 때 제대로 작동하지 않는 이유가 있습니까?
단지 추가 정보를 위해 저는 wordpress를 사용하고 있으며 functions.php 파일을 통해 올바른 방법으로 내 css 파일을 포함시킵니다.
내 웹 사이트는 www.jamieclague.com입니다. 언제든지 소스 코드를 살펴보십시오.
어떤 도움을 주셔서 감사합니다.
header.php
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?>Jamie Clague - Freelance</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----- CSS Stylesheet Link ------>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>
CSS - styles.php (코드 조각)
@media only screen
and (min-device-width:401px)
and (max-device-width:480px){
.header{
min-height:520px;
}
.banner-matter {
top: 22%;
width:100%;
}
.banner-matter p {
overflow: hidden;
width: 100%;
}
}
@media only screen
and (min-device-width:321px)
and (max-device-width:400px) {
.banner-matter h2 {
font-size: 27px;
}
.banner-matter p {
font-size: 20px;
}
a.more span {
left: 30%;
}
}
@media only screen
and (min-device-width:220px)
and (max-device-width:320px) {
img.scroll {
margin-top: -0.7em;
}
a.more {
background-size: 92%;
width: 180px;
height: 64px;
font-size: 1.15em;
}
.view {
padding: 0.3em 0 0;
}
a.more span {
left: 27%;
top: 27%;
}
}
max/min-device-width를 max/min-width로 바꾸어 보았습니까? – Huangism
예, 사실 제가 처음부터 그렇게했습니다. 실제로 최대/최소 너비를 사용할 때 브라우저에서는 올바르게 조정되지만 장치에서는 적절하게 조정되지 않습니다. 하지만 max/min-device-width를 사용하면 브라우저 나 장치에서 제대로 확장되지 않습니다 ... 누락 된 작은 크기 일 것이라고 확신합니까? – user3060945
작동하지 않는 방법을 설명해 주시겠습니까? 아이폰 5를 사용하여 예를 들어, 320px 너비.스타일이 다른 중단 점 스타일을 사용하고 있거나 전혀 작동하지 않습니까? – Huangism