2017-03-18 6 views
1

그래서 난이 여기 내 웹 사이트 : 당신이 의지를 계속 경우 다음은 태블릿보기로 바탕 화면보기에서 변경 브라우저 윈도우의 폭을 줄일 수 있다면 http://easenhall.org.uk/index.htmlHTML/CSS 내 페이지 크기를 조정하지 올바르게

모바일보기로 변경하십시오.

데스크톱 브라우저에서 작동하지만 모바일을 통해 웹 사이트를 볼 경우 항상 웹 페이지가 태블릿 모드로 표시됩니다. 나는 이유를 알 수 없다.

데스크톱 웹 페이지를 검사하고 장치 도구 모음 버튼을 눌러 모바일보기로 페이지 크기를 조정하면 태블릿보기에도 그대로 유지됩니다.

콘솔을 점검했는데 거기에 오류가 표시되지 않았으므로 잘못 표시되지 않습니다. 어떤 도움을 주시면 감사하겠습니다. 애플 도입 할 때

+0

머리글에 뷰포트 메타 태그를 포함하는 것을 잊었습니다. https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag –

답변

1

시도는 <header>

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

고맙습니다. :) 나이가 들어서 이런 문제가 생겼습니다. Im assuming 이걸 모든 페이지에 추가해야합니까? –

+0

[this] (http://a11yproject.com/posts/never-use-maximum-scale/)에 따르면 보통 최대 규모를 설정하지 않아야합니다. – Bob

+0

예, 죄송합니다. 내가 필요로하는 최신 프로젝트에서 복사했습니다. 나는 그것을 사용하지 않는다고 말하지 않을 것입니다. 조심하십시오.가능한 모든 속성에 대한 정보가 조금 더 있습니다. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho – Tacud

1

당신은 제목 태그 후이 메타 태그를 사용해야합니다, 그렇지 않으면 반응 배경로서

<title>This is title</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
0

작동하지 않습니다에 이것을 추가 아이폰은 얼마 전까지 만해도 작은 화면을 위해 디자인 된 페이지를 쓰는 사람은 아무도 없었던 것으로 예상했다. 여기에는 상대적으로 새로운 미디어 쿼리가 포함되어 있었지만 당시에는 아직 널리 지원되지 않았습니다.

그들은 스케일으로 큰 화면에서 작은 화면으로 전체 화면을 결정했습니다. 읽는 것은 쉽지 않았지만, 적어도 당신은 모든 것이 어디에 있는지를 볼 수 있었고, 항상 흥미로운 부분을 볼 수있었습니다.

뷰포트 (화면 외부 가상 화면)을 960 픽셀의 너비로 설정하여 크기 조정을 수행했습니다. 페이지가 렌더링되어 작은 물리적 화면으로 확대됩니다.

또한 CSS 미디어 쿼리는보고 된 너비가 960 픽셀이므로 대체 스타일을 트리거하지 않음을 의미합니다.

Apple은 viewport이라는 비표준 meta 속성도 도입하여 개발자가 뷰포트의 속성을 일부 제어 할 수있게했습니다.

속성의 가장 일반적인 용도는 뷰포트 크기를 실제 화면과 동일하게 설정합니다. viewort는 더 정확한 화면 크기를보고하고 CSS Media Queries가 나머지를 처리 ​​할 수 ​​있습니다. 실질적으로 viewport은 스케일링 효과를 실행 취소하는 데 일반적으로 사용됩니다.

데스크톱 브라우저에서는 처음부터이 문제가 없었으므로 뷰포트는 실제로 브라우저 창에 불과합니다. 그것이 데스크탑이 항상 예상대로 테스트하는 이유입니다. 왜냐하면 여러분이 보는 것은 실제로 여러분이 얻는 것이기 때문입니다.

+0

오 이런 의미가 지금 감사합니다 :) –

관련 문제