모바일 장치에서 화면 너비에 맞게 페이지를 만드는 방법은 무엇입니까?

하나의 양식 페이지가 있습니다. 이 양식을 크기 조정하여 모든 기기 (Android, iOS, ...)에서 화면 너비에 맞게 조정해야합니다. HTML이나 CSS로 어떻게 할 수 있습니까? style="width:100%"은 제 경우의 해결책이 아닙니다.모바일 장치에서 화면 너비에 맞게 페이지를 만드는 방법은 무엇입니까?

감사합니다.

출처

2013-09-30 Dmytro Zarezenko

미디어 쿼리를 사용하십시오. 반응이 빠른 디자인을 찾으십시오. –

width:100%은 (는)

당신은 너무 같은 다른 화면 크기를 대상으로 미디어 쿼리를 사용할 수 있습니다 : 그것은이 동일한 화면 크기에 표시되어있는 경우

form { 
    width: 800px; 
} 

@media only screen and (max-width: 800px) { 
    form { 
     width: 100%; 
    } 
}

위의 코드는 폭 800 픽셀보다 넓은 모든 화면에 form 800 픽셀을, 그리고 것 또는 800px 이하가되면 100 % 대신됩니다. 원하는만큼 많이 사용할 수 있으므로 예를 들어 max-width: 500px에 대해 다른 미디어 쿼리를 추가하고 화면 크기가 500px 이하인 경우 양식 스타일을 변경할 수 있습니다.

출처

2013-09-30 17:23:42 Ennui

양식 자체뿐만 아니라 모든 콘텐츠의 크기를 조정하고 싶습니다. 나는 모든 요소를 스케일링하기를 원합니다. 터치 스크린에서 손가락 두 개를 사용하는 것과 같습니다. 하지만 페이지가 자동으로로드됩니다. 모바일 장치에서 일부 페이지를로드 한 다음 두 손가락 제스처로 크기를 조정하십시오. pageload에서 같은 것을 원합니다. –

대부분의 모바일 브라우저, 즉 Safari는 반응이없는 사이트의 경우에도 자동으로 래퍼 너비에 맞게 확대/축소되므로 사이트의 축소 된 '데스크톱'레이아웃이 표시됩니다. 만약 이렇게하지 않는다면,'head'에'meta' 태그가있어 다른 동작을 지정하고있을 것입니다. 양식이있는 페이지의 전체 HTML 출력을 게시 할 수 있습니까? – Ennui

이러한 형태의 URL을 제공 할 수 있습니다. http://95.57.120.158:7300/api.php?action=poll&location_id=70 –

모바일 장치에서 화면 너비에 맞게 페이지를 만드는 방법은 무엇입니까?

답변

관련 문제