2016-07-11 6 views
2

내 사이트는 적어도 720px 너비가 필요합니다. Iphone 6은 1334x750의 해상도로 표시되지만 브라우저는 667px로보고됩니다. 삼성 S5는 1080x1920이지만 브라우저는 640을보고합니다.더 작은 화면을 더 큰 해상도로 조정하려면 강제 하시겠습니까?

화면이 세부 사항을 처리 할 수 ​​있지만 더 큰 해상도를 얻는 방법을 모르겠습니다. 최소 너비가되도록 720px가 필요합니다. 전화를 사용하려면 어떻게해야합니까? < 720px를 올바르게 확장하려면 어떻게해야합니까? 규모에 의해 내가 코드 디자인

@media에만 화면을 사용하기 전에 .CSS 코드에서 어떤 스크롤

+1

정확히 무엇을 목표로하고 있는지 확실하지 않지만 어쩌면 이것이 약간의 연구를위한 좋은 근거를 제공 할 수 있습니다. https://www.sitepoint.com/media-queries-width-vs-device-width/ 및 http : // www. quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html – marsze

답변

0

입력없이이 모든 720px을 보여 평균 (최소 폭 : 720px) 및 (최대 폭 : 1336px) 및 (최소 해상도

+0

또한 다양한 화면 크기로 * 테스트 * 코드를 작성하십시오! 어떤 화면보다 크거나 큰 애셋을 삽입해야 할 수도 있습니다. * 그리고 다른 차원의 여러 애셋을 번들로 묶어야 할 수도 있습니다. * (작은 하드웨어로 화면 크기를 줄일 수 있기를 바랍니다.) "못 생길 수도 있지만"예측할 수 없다. " 디스플레이는 휴대 기기에서 가장 값 비싼 구성 요소 중 하나이며, "식료품 점에서 판매 할 수있는 저렴한 전화"를 만들기 위해 노력한 엔지니어가 모서리를 많이 감쌌습니다. –

1

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

후 헤드 코드이 시작하면 현재의 모든 장치를 지원 시트를 CSS에 미디어 쿼리를 추가 할 필요가 http://codepen.io/mlegg10/pen/JKdOaj

+0

나는 혼란 스럽다. 주변을 인터넷 검색하는 방법을 가로 방향으로 테스트하는 방법을 알았지 만 지금은 720px 너비로 고정하는 방법을 알아낼 수 없습니다. 나는 그것을 탐지하는 방법을 안다. 그러나 두 개의 360px 이미지가 있는데, 나는 화면에 나란히 있어야한다. (실제 사이트를 테스트한다.) –

+0

테스트 페이지를 만들고 테스트 CSS 페이지에 추가 했습니까? – mlegg

+0

나는 무슨 일이 일어 났는지 확신하지 못했습니다. 마치 Chrome에서 미디어 쿼리를 표시하는 것뿐 이었지만 페이지는 완전히 동일하게 보입니다. 각 장치마다 스타일을 지정해야한다고 생각합니다. 720px 너비 페이지를이 장치 너비로 스케일하는 방법을 모르겠다. –

1

정확하게 이해했다면 내용 너비를 뷰포트 너비로 축소 할 수 있습니다. 이 코드에서 경우

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

그래서, 제거 : 코드 페이지의 head 구역에 다음 줄을 포함하지 않는 한 이것은 일반적으로 자동으로 수행됩니다. (그러나 요즘 다소 특이한 귀하의 페이지를 비 반응 적으로 만드십시오.)

장치 픽셀에 대한 관찰에 관하여 : 이것은 더 나은 디스플레이를 위해 중요한 "픽셀 밀도"와 관련이 있습니다/고해상도 이미지가 브라우저에 제공되는 경우 이미지뿐만 아니라 텍스트 (글꼴) 및 벡터 그래픽의 선명도. 예를 들어 iPhone 6의 실제 높이는 1334 물리적 픽셀 (1 : 2 비율)이지만, CSS 픽셀 단위의 경우 667px로 처리됩니다.

+0

제거하면 980에서 수정 된 것 같습니다. 720으로 만들려면 어떻게해야합니까? –

+0

이 줄이 제거되면 자동으로 축소되어야합니다. – Johannes

관련 문제