HTTP 헤더에 장치 해상도, 픽셀 밀도 등이 포함되지 않는 이유는 무엇입니까?

10

현재 CSS 미디어 쿼리를 사용하여 반응 형 웹 사이트를 개발 중입니다. 서버가 각 뷰포트마다 다른 HTML / CSS를 반환하면 훨씬 쉬울 것입니다.
HTML 파일을 요청할 때 클라이언트가 뷰포트 정보를 포함시킬 수없는 이유가 궁금합니다. 이 동작은 Accept-Language헤더를 사용하여 올바른 언어로 웹 사이트를 반환하는 데 이미 일반적입니다 .

http

— eliocs
소스

JavaScript를 통해 보낸 다음 CSS 파일을 사이드로드 할 수 있습니다. 문제는 해상도가 바뀔 수 있다는 것입니다.

— Knerd

RWD가 아닙니다. 이러한 HTML / CSS는 페이지를 새로 고치지 않으면 반응 형 효과를 제공하지 않습니다.

— Mahdi

해상도, 글꼴 스타일, 글꼴 크기, 브라우저 유형, 화면 크기 등이 모두 장치마다 변경 가능하며 웹 1.0 유형 질문을하거나 ASP, PHP, Javascript 추가 등과 같은 동적으로 이동하거나 html이 제공하는 미디어 선택기에 만족합니다.

— Jeff Langemeier

1

이미지 표시 기능이없는 소프트웨어가 브라우저 대신 HTML을 요청하면 어떻게 되나요? 스크린 리더와 같은? 아니면 터미널 기반 브라우저?

— Jack

18

간단히 말해 Wild Wild Web이 작동하도록 설계된 방식은 아닙니다.

원래 디자인은 단순히 HTML이 브라우저에 문서에 대한 힌트를 준 것입니다. 강조 할 비트, 이미지 파일을 가져올 위치 글꼴 및 크기에 대한 결정은 브라우저 및 로컬 구성 설정의 작업이었습니다.

그렇습니다. 전 세계가 발전한 것을 알고 있습니다. 이제 웹 디자이너는 우리의 눈으로 보는 모든 픽셀을 제어 할 것으로 기대합니다. 과거에는 데스크탑 테마가 그렇게하는 일이었습니다.

— 마이클 쇼
소스

3

나는 오늘날에도 장치의 일이되어야한다고 말합니다. 서로 다른 최소 CSS 세트를 설정하고 장치에서이를 처리하도록합니다.

— Jeff Langemeier

@JeffLangemeier 완전히 동의합니다. 이 답변조차 본질적으로 정확하지만 RWD에 대해서는 전혀 이야기하지 않습니다.

— Mahdi

1

컨텐츠와 디자인을 완전히 분리하는 새로운 웹 형식을 다시 디자인해야 할 때가 있습니다. :)

— eliocs

@Mahdi 나는 실제로 질문이 RWD에 관한 것이라고 생각하지 않습니다. 바퀴를 재발 명하려고 시도하고 HTML 사양에 <임의 개인 필요>가없는 이유가 궁금합니다.

— Jeff Langemeier

@eliocs는 html 및 CSS라고합니다. HTML은 구조이고 CSS는 디자인입니다. 또는 디자인에서 전체 컨텐츠를 분리하려면 PHP, Python의 django 등의 동적 시스템으로 이동하십시오.

— Jeff Langemeier

8

나는 당신이 반응 형 웹 디자인 에 대한 아이디어를 완전히 얻지 못했다고 생각합니다 . 클라이언트의 웹 브라우저를 기반으로 다른 HTML / CSS / JS를 제공하는 것은 오래 전부터 있었으며 여전히 일부 웹 사이트가 여전히 존재한다고 확신합니다. 웹 사이트를위한 친절한 주제.

내 생각에 누락 된 것은 시나리오에서 사용자가 뷰 포트를 세로에서 가로로 변경하면 페이지를 새로 고치지 않으면 응답하는 대답을 얻지 못한다는 것입니다. 웹 브라우저 창의 크기를 조정하거나 기본 확대 / 축소를 변경하는 경우에도 동일한 조치가 필요합니다. 또한 페이지의 요소는 다른 요소에도 반응 할 수 있습니다. 예를 들어 오른쪽의 사이드 바를 숨기면 기본 컨텐츠가 변경에 응답합니다. 페이지를 새로 고치지 않으면 다시는 불가능합니다.

또한 HTTP 요청은 전체 웹 페이지 를 서버하도록 설계되지 않았습니다 . 대부분의 경우 뷰포트 메타 정보를 전달할 필요가없는 일반 데이터, 파일, 이미지 등을 보내거나 받기위한 요청을 보내고 인터넷 과 같은 규모의 오버 헤드 가 많이 발생합니다. .

— 마흐디
소스

오버 헤드 모바일 장치를위한 작은 해상도의 이미지를 반환 상상도 이미지를 제공 도움이 될 것입니다. 페이지가로드되면 뷰포트 변경이 큰 고려 사항이라는 데 동의합니다.

— eliocs

@eliocs 당신이 맞습니다. 이미지는 실제로 중요한 것입니다. 수정 해 주셔서 감사합니다.

— Mahdi

이것이 바로 반응 형 디자인이 해결하려고하는 문제라고 생각하지 않습니다. 대부분의 경우 목표는 첫 번째 렌더링에 필요한 최소량의 리소스가 제공되도록하는 것입니다. 당신은 여전히 위에 반응 형 디자인을 제공 할 것입니다. 요청에 정보가 있다고해서 반응 형 디자인이 금지되는 것은 아닙니다. 예를 들어, 첫 번째 응답에서 HTTP2를 사용하여 srcset에 적합한 이미지를 가져올 수 있습니다. 뷰포트 크기 정보가 없으면이 작업을 수행 할 수 없지만 srcset을 사용하여 반응 형을 유지할 수 있습니다.

— monokrome

2

당신이 있습니까 있는지 당신은 반응 디자인을하고있어? 반응 형 디자인은 기술적으로 유동적 인 디자인과 미디어 쿼리의 조합입니다.

유동적 인 디자인은 배치 방법에 대해 현명한 경우 뷰포트 문제의 90 %를 해결합니다. 미디어 쿼리는 현재 차원에 따라 그리드 특성을 변경하여 다른 10 %를 얻습니다.

유동적 (모든 곳의 비율, 모든 것의 상대적 크기, 픽셀로 지정된 것 등) 만하려고하면 뷰포트의 크기가 크게 다를 때 (데스크톱 가로보기와 비교하여) 할 문제가 발생합니다. 모바일 인물 사진). 2048px에서 640px로 갈 때 일부는 적합하지 않습니다. 미디어 쿼리 만 수행하려고하면 수십 및 수십 개의 미디어 쿼리가 중단되고 기본적으로 CSS 클래스를 미세 관리합니다. 두 방법 모두 RWD에는 적합하지 않습니다. 모든 것을 얻기 위해이 두 가지를 결합해야합니다.

내 충고 : 데스크탑 풍경, iPad 초상화 및 풍경, iPhone 초상화 및 풍경과 같은 3 가지 또는 4 가지의 "공칭 해상도 및 방향"을 만들고이를 와이어 프레임으로 처리하십시오. 그런 다음 해당 나누기에 대한 미디어 쿼리를 설정하십시오. 그런 다음 유동적 인 레이아웃을 사용하여 몇 가지 중단 점을 고수하기 위해 열심히 노력하십시오. 아마도 어떤 종류의 CSS 그리드 (수십 가지가 사전 빌드되어 있거나 직접 롤링 할 수 있음) 일 가능성이 큽니다.

— 칼폴
소스

1

컨텐츠를 가져 오는 동적 웹 사이트가있는 경우 다음과 같은 코드를 통해 트릭을 수행합니다 (ES6에서).

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

참고 : '자격 증명'은 세션 쿠키 용입니다.

그런 다음 서버 측에서 헤더를 읽을 수 있습니다 (예 : PHP).

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...

— 아메 노마드
소스

이것이 바로 정답입니다.

— marvindanig

1

사용자가 페이지를 다시로드하지 않고 브라우저 창의 크기를 조정할 수있는 단순한 이유 때문에 작동하지 않습니다.

반응 형 디자인은 다양한 뷰포트 크기 및 기타 요소에 따라 레이아웃이 동적으로 변경됨을 의미합니다. 따라서 요청시 뷰포트 크기를 기준으로 서버 측에서 디자인이 고정 된 경우 사용자가 창 크기를 조정하면 응답하지 않습니다. 이것이 클라이언트 측에서 미디어 쿼리가 평가되는 이유입니다.

— 자크 B
소스