반응 형 웹 디자인은 데스크톱에서는 작동하지만 모바일 장치에서는 작동하지 않습니다.

117

휴대 전화에 반응해야하는 웹 사이트가 있습니다. 내 데스크탑을 사용하여 만들었습니다. 브라우저 창을 조정하면 휴대폰에서 완벽하게 작동하지만 실제 휴대폰에서 확인하면 Samsung Galaxy S2가 모바일보기에 응답하지 않습니다.

무엇이 잘못 되었을까요?

mobile web responsive-design

— 타 다스 데이 비소 나스
소스

1

누구에게나 도움이되도록 더 많은 정보와 코드를 추가해야합니다. 등 귀하의 CSS, HTML, 당신은 등이있는 경우, 사용하고있는 (트위터 부트 스트랩 등) 어떤 프레임 워크

— ajacian81

307

html 헤드에 뷰포트 메타 태그가 누락되었을 수 있습니다.

 <meta name="viewport" content="width=device-width, initial-scale=1">

그것이 없으면 장치는 뷰포트를 전체 크기로 가정하고 설정합니다.

여기에 더 많은 정보가 있습니다 .

— 아구 쉬
소스

2

이 줄없이 브라우저에서 작동 할 수 있지만 모바일에서는이 줄만 있으면됩니다.

— Tadas Davidsonas 2014

3

난 그냥 당신을 사랑합니다

— 디미트리 필리포

난 당신이 너무 @ ΔημήτρηςΦιλίππου 사랑

— Agush

당신에게 사랑의 또 다른 단어

— btlm

3

반드시 생산하게 index.html실제로 태그뿐만 아니라 개발 포함index.html

— halafi

6

나는 또한이 문제에 직면했다. 마침내 해결책을 얻었습니다. 이 벨로우즈 코드를 사용하십시오. 희망 : 문제가 해결 될 것입니다.

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

— Saiful 이슬람
소스

2

위에 대답하고 사용하는 것이 옳지 만

<meta name="viewport" content="width=device-width, initial-scale=1">

하지만 React와 webpack을 사용하는 경우 요소 태그를 닫는 것을 잊지 마십시오.

<meta name="viewport" content="width=device-width, initial-scale=1" />

— 샤답 아흐메드
소스

-1

반응 형 메타 태그

모든 장치에 대해 적절한 렌더링 및 터치 확대 / 축소를 보장하려면 반응 형 뷰포트 메타 태그를 <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

— Marcelo 오스트리아
소스