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

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

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

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

답변

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) {
    ...

$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) {
        ...