모바일 가로 세로 반응에 관한 문의입니다.

모바일 가로 세로 반응에 관한 문의입니다.

QA

모바일 가로 세로 반응에 관한 문의입니다.

본문

53117b84c540ea00886b120bed9552e6_1438055158_3593.png

보시는 거와 같이 모바일 세로모드 에서 헤드와 푸터를 잡고 중앙은 아이프레임으로 (제가 외부 디자인을 해서요) 그누보드5 모바일 게시판을 와이드 100%해서 잡았습니다.

 

1.헤더쪽에 파란색 메뉴가 있는데. 이것을 가로로 전환하면 , 그림의 "가로1"처럼 와이드만 늘게 하고 싶은데  세로 픽셀도 늘어나 그림의 "가로2"처로 출력이 됩니다.

 

2.아이프레임으로 짜진 그누5게시판의 세로모바일의 제목 글자수가 예를 들어 4개인데 가로로 전환하면, 그림의 "가로1"처럼 글제목수가 스크린폭에 반응해 늘어나야 되는게 반응형 게시판의 역활이 아닌지요.?? 그런데 그렇지 않고 그림의 "가로2" 글 제목수가 그대로 입니다. 아이프레임으로 짜서 그런건지요??

 

고수님들의 한수 부탁드립니다. 시원한 여름 보내십시요 ~~


 

Detect languageAfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu
AfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu
Text-to-speech function is limited to 100 characters

이 질문에 댓글 쓰기 :

답변 2

1.헤더쪽에 파란색 메뉴가 있는데. 이것을 가로로 전환하면 , 그림의 "가로1"처럼 와이드만 늘게 하고 싶은데  세로 픽셀도 늘어나 그림의 "가로2"처로 출력이 됩니다.

 

헤더의 가로픽셀 주신게 이미지이신지요?

 

다른 태그들은 가로만 늘린다면 세로가 늘어나지 않지만 이미지태그는 가로를 늘리면 세로도, 세로를 늘리면 가로도 비율에 맞추어서 늘어나요. 이건 세로를 고정해주시던지 이미지를 안쓰시는 방법으로 가셔야 할것같습니다.

 

2.아이프레임으로 짜진 그누5게시판의 세로모바일의 제목 글자수가 예를 들어 4개인데 가로로 전환하면, 그림의 "가로1"처럼 글제목수가 스크린폭에 반응해 늘어나야 되는게 반응형 게시판의 역활이 아닌지요.?? 그런데 그렇지 않고 그림의 "가로2" 글 제목수가 그대로 입니다. 아이프레임으로 짜서 그런건지요?? 

 

화면이 전환한다고 페이지가 바뀌거나 데이터가 변하는건 아니죠... 현재 페이지에 표시되는 데이터는 이전과 동일합니다.


제이커리 모바일에 화면 회전을 감지하는 펑션이 있어요. 이걸 사용하셔서 화면 회전시 화면 상황에 맞게 json으로 해당 데이터를 다시 불러오시면 해결 됩니다.

1번답변은.다시 한번 검토하고 연습해 보겠습니다 

 2.번 답변중에 "제이커리 모바일에 화면 회전을 감지하는 펑션이 있어요. 이걸 사용하셔서 화면 회전시 화면 상황에 맞게 json으로 해당 데이터를 다시 불러오시면 해결 됩니다 "
죄송하지만, 이 부분 조금만 더 설명 해주심 안될까요. ^___^ 

아무튼, 드래곤님의 소중한 답변을 참고로 좀더 공부 하겠습니다.

2번에대해 조금 설명을 붙여볼께요.

 

기준을 한번 잡겠습니다.

 

화면이 세로라면 게시글이 10개가 나오면 한페이지에 보이는 리스트에 알맞고, 가로로 회전하면 5개가 나오면 알맞다고 치겠습니다.

 

이 기준에 대해서 문제가 두가지가 있습니다.

 

첫번째 문제가 화면을 회전해도 페이지에 표출되는 데이터가 변하는건 아니란게 문제죠.

 

그러니 데이터를 정적으로 불러올 방법이 필요합니다. 이건 ajax로 처리하면 간단합니다.

 

두번째 문제로 아작스(영한전한귀찮...)로 데이터가 바뀌도록 하는건 처리했다고 해도 데이터를 언제 바꿔야할지를 감지하지 못하는 문제가 있죠? 

 

이건 제이커리 모바일에 있는 오리엔테이션체인지라는 것으로 해결이 가능합니다.

 

일단 아작스로 리스트 출력을 몇개할지 값을 넘기면 그에 따라 출력해주는 것을 만드시고 펑션으로 감싸주세요.

 

그리고나서 오리엔테이션체인지로 지금 화면의 각도를 체크하셔서 세로면 세로리스트를, 가로면 가로리스트를 뽑아주시면 됩니다.

 

아작스는 데이터를 어떻게 쓰시는지 모르니 거기까진 못짜드리고... 오리엔테이션체인지 사용볍만 적어드릴께요.

 

제이커리모바일.js파일을 넣으시고 사용하셔야합니다.

 


$(window).on("orientationchange", function(event){
    if(event.orientation == "landscape"){
        //세로
    }else if(event.orientation == "portrait"){
        //가로
    }
});
답변을 작성하시기 전에 로그인 해주세요.
전체 123,125 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT