기본 사이트에 대한 모바일 지원 사이트 계획 및 구축 [닫기]

StackOverflow https://stackoverflow.com/questions/9435

문제

우리는 고객 중 한 명을 위해 모바일 사이트를 구축하는 초기 계획 단계에 있습니다.이 모바일 사이트는 우리가 이미 구축한 기본 사이트에 추가될 것입니다.우리는 콘텐츠가 기본 사이트의 작은 하위 섹션이 될 것이며 사이트를 사용할 것으로 예상되는 주요 청중을 대상으로 할 것이라고 결정했습니다.

일부 샘플 모바일 사이트를 살펴보면서 URL에 WAP가 포함된 많은 사이트가 실제로는 단순한 HTML 파일이라는 사실을 발견했습니다. http://wap.mlb.com 실제로는 WAP를 지원하지 않지만 단순한 HTML입니다.

내 질문은 WAP가 과거를 생각하는 것입니까?사이트를 그대로 렌더링할 수 있는 스마트폰과 iPhone을 사용하면 WML과 WAP에 대해 걱정할 필요가 있습니까? 아니면 간단한 HTML 버전으로 충분합니까?

또한 블로그나 튜토리얼을 추천하거나 아래에서 모바일 장치를 확인하는 가장 좋은 방법에 대한 답변을 주실 수 있나요?프로그래머로서 우리는 모바일 사이트로 리디렉션하기 위해 사용자 에이전트의 각 변형을 알아야 합니까?

마지막으로, iPhone/Touch Safari 브라우저용 모바일 사이트를 프로그래밍하시겠습니까, 아니면 사이트를 그대로 두시겠습니까?

도움이 되었습니까?

해결책

최신 휴대폰에는 일반 HTML과 매우 유사한 HTML 모바일 프로필(XHTML MP)을 사용하는 WAP2가 함께 제공됩니다.구형 전화기는 WML(Wireless Markup Language)을 사용합니다.

귀하의 청중에 따라 나는 XHTML MP를 사용하여 휴대폰 친화적인 사이트 버전을 만들고 WML을 완전히 삭제하는 것을 고려할 것입니다.휴대폰 친화적이란 가벼운 그래픽, 적은 JavaScript, 간단한 탐색을 의미합니다.

다양한 휴대폰의 기능을 확인하려면 다음을 살펴보세요. 워플.

또한 다음을 살펴보는 것이 좋습니다. 모바일 웹 모범 사례 w3c에서.

다른 팁

많은 작업을 수행하지 않고도 iPhone에 대한 지원을 개선하기 위해 수행할 수 있는 두 가지 작업은 다음과 같습니다.

URL 표시줄을 숨기려면 페이지를 위로 스크롤하세요.

<script type="application/x-javascript">

  if (navigator.userAgent.indexOf('iPhone') != -1) {
    addEventListener("load", function() {
      setTimeout(hideURLbar, 0);
    }, false);
  }

  function hideURLbar() {
    window.scrollTo(0, 1);
  }

</script>

그리고 페이지 너비에 대한 크기 조정을 설정합니다. (몇 가지 테스트를 수행하고 이를 사용해 보는 것이 가장 좋습니다. 또한 사용할 수 있는 다른 예도 찾아보십시오. user-scalable=true):

<meta name="viewport" content="width=320; user-scalable=false" />

꼭 확인해 보시길 권해 드립니다 카메론 몰스' 책 모바일 웹 디자인.모바일에 최적화된 사이트를 구축하는 기술적인 방법이라기보다는 사용 가능한 다양한 옵션에 대해 생각하게 하고 각 옵션의 장단점을 요약합니다.당신이 어떤 접근 방식을 취하고 있는지, 그리고 그것이 올바른 것인지에 대해 확실히 생각하게 만들 것입니다.또한 귀하의 사이트에 대한 모바일 장치 요청을 감지하는 데 도움이 되는 리소스에 대한 몇 가지 지침이 있다고 생각합니다. 거기에는 다양한 옵션이 있습니다.

현재(2014)

모바일 장치를 위한 별도의 사이트가 필요하지 않고 대신 다음과 같은 프런트 엔드 라이브러리를 사용할 수 있습니다. 트위터 부트스트랩 사용하는 반응형 렌더링사이트가 화면 크기에 맞게 자동으로 조정되도록 태블릿 또는 휴대 기기 또는 데스크탑

주요 장점 중 하나는 유지 관리 감소 모바일용과 데스크톱용으로 별도의 웹사이트를 운영하는 것과 비교하면 말이죠.

자세히 알아보려면 트위터 부트스트랩 딸깍 하는 소리 여기

2.5G 휴대폰과 새로운 3G 휴대폰의 주요 차이점은 2.5G 휴대폰이 자체 브라우저를 사용하는 반면 3G 휴대폰의 브라우저는 렌더링 기능에서 훨씬 더 유사하고 정확해졌다는 것입니다.

반면에 CSS를 사용하면 큰 화면 형식이나 모바일에 최적화된 작은 형식에서 동일한 HTML을 렌더링할 수 있으므로 "간단한 HTML" 접근 방식이 가장 덜 어려운 경로인 것처럼 보였습니다. 가지다.또한 테이블 없는 레이아웃을 사용하면 웹사이트의 확장성이 향상되므로 크고 작은 화면 형식 모두에서 사이트를 더 쉽게 렌더링할 수 있습니다.

따라서 최종 질문은 목표 시장에 대한 질문이 될 것입니다.3G를 완벽하게 지원하는 휴대전화를 갖고 있는 경향이 있는 기술에 정통한 청중을 대상으로 하고 있습니까?최대 2.5G를 사용할 수 있는 사람들을 대상으로 하고 있습니까?

내 경험에 따르면 실제로 무엇을 하려는지, 사용자가 누구인지, 어디에 있는지에 따라 달라집니다.

WAP는 많은 나쁜 평가를 받았지만 WAP의 장점은 낮은 대역폭과 높은 대기 시간 연결을 제공한다는 것입니다.WML 콘텐츠는 이동통신사의 게이트웨이에 의해 최적화되어 무선으로 전송되는 데이터의 양을 크게 줄입니다.iPhone 등을 사용하는 경우 3G 커버리지가 견고한 지역에서는 더 풍부한 콘텐츠를 이용할 수 있지만 앱이 방해가 되지 않는 지역에서 여전히 좋은 성능을 발휘하기를 원한다면 WAP가 큰 이점이 있습니다.

WAP에 대해 주의해야 할 점 중 하나는 휴대폰의 WAP 지원 품질이 매우 다양하다는 것입니다(스마트폰 웹 브라우저에서도 마찬가지라고 말할 것 같습니다).대부분은 페이지를 정상적으로 표시하지만 일부 브라우저에서는 양식 처리가 정말 형편없습니다.

사용자 에이전트에 따라 콘텐츠를 변경하는 경우 특정 유형의 콘텐츠에 액세스할 수 있는 명시적인 방법도 제공해야 합니다(예:별도의 URI) - 자동화된 선택이 항상 올바른 것은 아니며 클라이언트가 이를 무시할 수 있기를 원합니다.

WAP 개발을 진행 중이라면 Windows 기반 WAP 브라우저인 WinWAP를 확인해 보세요.

아주 소액의 돈을 쓰고 싶다면 중고 책을 찾아보세요 "Palm OS 웹 애플리케이션 개발자 가이드" 아마존에서 1달러 미만으로.이전 Palm VII 장치에 대한 구체적인 팁은 더 이상 적용되지 않지만 여전히 적용될 수 있는 모바일 웹사이트 제작에 대한 몇 가지 섹션이 있습니다.나의 기본적인 조언은 다음과 같습니다.먼저 관련 정보로 페이지를 작게 만든 다음 탐색 링크를 만드세요.일반/상용구 콘텐츠를 다른 페이지로 푸시합니다.사용자가 단일 페이지에서 보내는 시간을 줄이기 위해 최적화를 시도하십시오.대기 시간을 줄이기 위해 페이지에 대한 많은 개체(이미지, JavaScript 파일)를 다운로드하지 마십시오.

코드:w3 유효성 검사기를 사용할 때 11개의 오류가 반환됩니다.시도된 인덱스 페이지는 다음과 같습니다.여러 줄이 사용되지 않을 것입니다.그것들은 템플릿 라인입니다.

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title>
<meta name="description" content="A Thomas Image professional photography serving Cleveland
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby">
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,">
<meta name="y_key" content="7b00158550200c1c">
<meta name="y_key" content="b5a3e0c1d778ff8a">
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" />
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" />
<meta name="viewport" content=”width=320,user-scalable=false”>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top