CSS - 모바일 웹 사이트가 이상하게 반응하고 있습니까?

저는 웹 사이트를 개발 중이며 현재 미디어 쿼리를 사용하여 응답합니다. 미디어 쿼리가 완벽하게 작동하고 웹 사이트가 에뮬레이터에서 모바일로 바뀝니다. (http://mobt.me/2T5i 및 Chrome의 검사 요소). 두 에뮬레이터 모두에서이 사이트는 내가 원하는 방식으로 보이지만 ios8을 실행하는 iphone 5에서 볼 때 완전히 다른 이야기입니다. 나는 메타 태그와 모든 것을 포함 시켰지 만 그것은 아직도 나의 휴대폰에서 이상하게 행동한다. 나는 또한 친구 전화를 확인하고 똑같은 일이 일어난다. 당신이 내 전화에 모습입니다 웹 사이트 here CSS - 모바일 웹 사이트가 이상하게 반응하고 있습니까?

를 볼 수 있습니다

출처

2014-10-12 Aten

당신의 미디어 쿼리를 읽지 않습니다 어떤 이유로 사파리하십시오.

@media screen and (max-device-width:640px), screen and (max-width:640px) { 
    /* styles here */ 
}

TIP : 나는 미디어 쿼리 이런 종류의 시도, 왜 모르겠지만 사파리에서 잘 작동 해달라고 몇 가지 클래스가 있습니다.

이 바탕 화면 메뉴를 숨길

@media (max-width: 775px) and (min-width: 500px) { 
.item-wrap { 
    display:none; 
} 
}

(가시 : 숨겨진 나던 일을) 당신이해야 할

는 미디어 쿼리에 다음 줄을 추가합니다.

편집 :

음, 헤드 태그를 확인해야합니다. 당신은 부하 JQuery와 전에 부트 스트랩을로드하는,이 코드를 시도하지 :

<head> 

<title>Third Wave Analytics</title> 

<link rel="stylesheet" href="css/bootstrap.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="js/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 


<link rel="stylesheet" href="css/style.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<link rel="icon" href="../../favicon.ico"> 
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"> 
<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css"> 
<link href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,300italic" rel="stylesheet" type="text/css"> 
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css"> 
<link href="http://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css"> 



<script> 
function scroll(){ 
$('.btnMedio').click(function(event) { 
    // Preventing default action of the event 
    event.preventDefault(); 
    // Getting the height of the document 
    var n = $('#myCarousel').height() + 20; 
    $('html, body').animate({ scrollTop: n }, 900); 
}); 
}; 
$(document).ready(scroll); 
</script> 
</head>

출처

2014-10-12 02:17:27

'디스플레이 : 없음;'무엇을 변경하고 모바일뿐만 아니라 데스크탑 용 네비게이션 바에을 엉망 최대-장치 폭을 사용하지 않았다. – Aten

여전히 작동하지 않습니다. 부트 스트랩은 사용하지 않아서는 안됩니다. – Aten

그런 오류가있는 경우 때때로 문제가 발생할 수 있습니다. –

CSS - 모바일 웹 사이트가 이상하게 반응하고 있습니까?

답변

관련 문제