웹 사이트를보다 모바일 친화적으로 만드는 10 가지 방법

웹 사이트의 모바일 경험을 향상시킵니다 웹 사이트는 스마트 폰과 태블릿에서 원활한 모바일 경험을 제공합니까? 최신 브라우저는 Pinch-to-Zoom과 같은 기능을 제공하지만 모바일 용 사이트 최적화는 사용자 만족도에 중요합니다. 완전한 모바일 재 설계를위한 리소스가 부족합니까? 이 10 가지 간단한 단계는 사이트의 모바일 유용성을 크게 향상시킬 수 있습니다. 키 테이크 아웃 :

간단한 조정은 양식 입력 속성을 올바르게 설정하고 모바일 친화적 인 우선 너비를 사용하는 것과 같은 모바일 경험을 극적으로 향상시킵니다. 이미지와 입력 필드는 오버플로를 방지하기 위해 100%의 가 있어야합니다. 긴 텍스트 문자열에는 를 사용하십시오 미디어 쿼리를 사용하면 모바일 장치 용 사용자 정의 스타일이 활성화되어 데스크탑과 모바일 모두에서 최적의 프리젠 테이션을 보장합니다. 줌 중에 화면이 가려지지 않도록 모바일의 고정 포지셔닝을 피하십시오.

표준 글꼴은 다운로드 시간을 최소화하여 모바일로드 속도를 향상시킵니다. 사용자 정의 글꼴을 사용하는 경우 더 나은 사용자 경험을 위해 기본 글꼴 디스플레이 우선 순위를 지정하십시오.

형식 입력 속성 최적화 :

• 이름 및 주소 필드의 경우 autocorrect (
)를 비활성화하고 오류를 방지하고 타이핑 효율을 향상시킬 수 있도록 자동 고정 ( 속성을 ​​사용하십시오. max-width word-wrap
• 모바일 친화적 인 선호 너비를 설정하십시오 :
웹 사이트가 데스크탑 브라우저에서 읽을 수있는 가장 좁은 너비를 결정하십시오. 뷰포트 메타 태그 에서이 너비를 사용하십시오

이것은 모바일에서 불필요한 수평 스크롤을 제거합니다. 유체 디자인의 경우 최적의 가독성을 보장하는 너비를 선택하기 만하면됩니다.

1. 이미지를 100%로 설정하십시오 :

CSS에서

를 100%로 설정하여 넓은 이미지가 넘치지 않도록합니다. autocorrect="off" 배경 이미지의 경우 autocapitalize="words"를 사용하십시오. 최신 브라우저는 줌 선명도를 효과적으로 처리합니다. 뷰포트 메타 태그에서 type="email"가 비활성화되지 않도록하십시오

입력 필드를 100%로 설정하십시오
4. 마찬가지로, CSS의 <strong>에 및 요소를 적용하여 입력 필드가 화면을 넘어 확장되는 것을 방지합니다. <code>max-width</code> 제출 버튼을 비활성화 할 때 주의를 사용하십시오 </strong> <ing> 잠재적 인 네트워크 중단으로 인해 특히 모바일에서 제출 버튼을 무기력하게 비활성화하지 않습니다. 비활성화가 필요한 경우 짧은 기간으로 제한하십시오. </ing></prevent> </li> </ol> 긴 줄에 를 고용하십시오 : <code>max-width: 100%;</code> <code>input</code> <code>textarea</code> 스타일을 사용하여 긴 텍스트 문자열 (예 : 참조 코드)이 화면 오프 스크린을 확장하는 것을 방지합니다. <ol start="5"> <li> <strong> </strong> </li> 간격을 조심스럽게 사용하십시오 : </ol> <p> <aces> 긴 숫자 문자열 내의 공간 대신 ​​카피-페이스트 기능에 영향을 미치지 않으면서도 요소 내에서 패딩을 사용하여 시각적으로 별도의 그룹을 사용하십시오. </aces></p> 미디어 쿼리를 활용 : <ol start="6"> <li> <er> 데스크탑 프리젠 테이션에 영향을주지 않고 모바일 특정 스타일을 적용하려면 미디어 쿼리를 사용하십시오. <strong> <code>word-wrap</code> </strong> 고정 포지셔닝을 피하십시오 (모바일) : </er> </li> </ol> <position> 줌의 모호함을 방지하기 위해 미디어 쿼리를 사용하여 모바일에서 헤더 또는 사이드 바의 고정 포지셔닝 비활성화. <p> <code>word-wrap: break-word;</code> </p> 표준 글꼴 우선 순위 : <pre class="brush:php;toolbar:false"><code class="language-html"><input type="text" size="20" autocorrect="off" autocapitalize="words" placeholder="What's your name?"> <input type="email" size="20" placeholder="What's your email?"></code>

   표준 글꼴을 사용하여 다운로드 시간을 느리게하지 마십시오. 사용자 정의 글꼴을 사용하는 경우 Google 글꼴 로더와 같은 기술을 사용하여 초기에 기본 글꼴을 표시하여 사용자 경험을 향상시킵니다.

   결론 :
   7. 이러한 간단한 조정은 모바일 경험을 크게 향상시킵니다. 더 행복한 사용자를 위해 오늘 구현하십시오! 제공된 FAQ는 모바일 웹 사이트 최적화의 주요 측면을 추가로 다룹니다.

   위 내용은 웹 사이트를보다 모바일 친화적으로 만드는 10 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!