2014-01-10 3 views
0

나는 내 웹 사이트 중 몇 개에 톱 바를 가지고 있는데, iframe을 통해 보여 지지만 휴대 기기에서는 끔찍한 것처럼 보이기 때문에 div에 넣은 다음 div를 CSS없이 표시 할 수 있는지 궁금하다. 화면이 특정 크기보다 작은 경우.다른 장치의 프레임이 다릅니 까?

이상적인 것은 데스크톱에서 iframe을 표시하고 휴대 기기에서 iframe을 표시하는 것입니다. 나는 나를 위해 이상적인 솔루션이 될 것입니다 무엇을 다른 소스로 iframe을 표시하는 방법을 전혀 생각이 없다

@media only screen and (max-device-width : 320px) 
#div {display:none;} 

:

내가 좋아하는 뭔가를 생각하고 있어요.

너희들이 나를

+0

시도 '@media 만 화면 (MAX-소자 폭 : 320 픽셀) {{ #div 디스플레이 : 없음;}} ''iframe '을 바로 타겟팅 할 수 있습니다. – putvande

답변

0
@media handheld and (max-device-width : 320px) 
{ 

#div {display:none;} 

} 

너무 장치 폭을 확인하고 최대-장치 폭 기능에서 동일하게 사용하는 데 도움 수 있기를 바랍니다.

0

정확하게 이해하면 화면 너비에 따라 다른 URL을 표시하려고합니다. 나는 두 개의 iframe을 만들 것을 제안 할 것이다. 하나는 display : none과 display : block이다. 화면이 x px보다 작 으면 표시 속성을 전환하십시오.

같은 :

<style> 
iframe { 
    width: 100%; 
    height: 200px; 
} 
#mobile-iframe { 
    display: none; 
} 
@media handheld and (max-device-width : 320px) { 
    #normal-iframe { 
     display: none;   
    } 
    #mobile-iframe { 
     display: block; 
    } 
} 
</style> 

<iframe id="normal-iframe" src="http://test.com"></iframe> 
<iframe id="mobile-iframe" src="http://test.com/help/"></iframe> 

실험 여기와 : http://jsfiddle.net/zTzRA/

관련 문제