2014-06-09 3 views
0

웹 사이트가 있습니다 http://bit.ly/1h3HLVE레일 앱의 모바일 최적화

휴대 기기에서 웹 사이트를 볼 때 두 가지 문제가 있습니다. 나는 웹 사이트에게 내 모바일 확대를 처음로드 할 때 상단 메뉴 바에서

  1. 드롭 다운 상자는
  2. (어쨌든 내 아이폰과)보기 모바일에서 작동하지 않습니다, 나는 축소해야 제대로 볼 수 있습니다. 모바일 장치에 맞는 크기로 자동으로 열 수있는 방법을 찾고 싶습니다.

누구에게 도움을 줄 수 있습니까?

답변

0

당신이하려고하는 것은 반응 형 디자인이라 불리는 것입니다. 가장 쉬운 방법은 Bootstrap에 대해 조금 배우고, 부트 스트랩은 디자인을위한 프레임 워크이며, 쉽게 통합 할 수있는 bootstrap-sass이라는 레일 용 보석이 있습니다.이 설정을 통해 다른 설정을 할 수 있습니다 동작 (부트 스트랩의 기능 중 하나임)을 사용하면 휴대 기기에서 navbar을 숨길 수 있고 모바일에서는 더 작게 표시 할 수 있습니다. 또한 부트 스트랩은 이미지와 테이블에 대한 반응 형 적응 지원을 통해 장치의 너비에 따라 동적으로 변경됩니다.

물론 항목을 숨기면 사이트에 계속로드되므로 궁극적으로로드하기가 어려울 수 있으므로 browser gem을 사용할 수 있습니다.이 경우 하나의 조건부로 다른 동작을 할 수 있습니다 (모바일? 데스크탑? 예) 각보기마다 다른보기를 가질 수 있습니다.

둘 다 확인하십시오. 시작하기에 좋은 장소이며, 많은 사람들을위한 가이드가 있습니다.

+0

감사합니다. 전에 부트 스트랩을 사용했지만 브라우저 보석을 확인합니다. 매우 감사. – tessad

+0

다른 방법은 CSS에서 반응 형 코드를 작성하는 것입니다.하지만 실제로는 어렵거나 자바 스크립트로 바꾸는 것이 훨씬 더 어렵다고 생각합니다. 이것이 내가 부트 스트랩을 제안하는 이유입니다.하지만 응답 프레임 워크가 많이 있습니다. 너비에 따라 크기를 관리하는 무언가가 필요하고, 부트 스트랩으로 돌아가고, 모든 디자인을 제외하고, 그리드 시스템으로 많은 것들을 할 수 있고, 필요로하는 아이템을 "미리 선택"하여 문제가 없도록 할 수 있습니다. 자신의 기본 디자인을 덮어 씁니다. – Alexis

+0

예, 미리 선택하는 것이 좋습니다. 모든 디자인 요소와 스타일을 포함하여 모든 것을 위해 사용했을 때만 부트 스트랩을 사용했습니다. 모바일 응답 부품을 사용하기 위해 미리 선택할 수 있다면 좋을 것입니다. 감사 – tessad