Mobile page horizontal and vertical screen switching tips

Reprint: http://www.xuanfengge.com/move-pages-anyway-screen-tips.html

foreword

When making mobile pages, the display effect of the page in different mobile phone resolutions is often considered, and some layout skills are used to make the page compatible from the smallest iphone4 to the larger iphone6 plus and other android mobile phones.

However, a small detail is often overlooked: users sometimes switch between horizontal/vertical screens when using, and the effect of the user's switching is rarely considered when making pages.

Example

Let's first take a look at the effect if the horizontal/vertical screen switching is not considered (for example, the vertical version design).

analyze

The display effect is very unfriendly, how to solve it?

1. Allow users to view the effect only in landscape/portrait

This can be set in native apps and operating systems, but the front-end cannot be forced through the javascript API.

2. Adjust page layout and elements for page responsiveness

The design adjustment for the horizontal/vertical version becomes the vertical/horizontal version, the display effect must be different from the original design concept, some things must be crowded, and the workload is relatively large.

3. Design and adjust the page layout for another horizontal/vertical version of the page

The investment cost is too high, and the probability of users switching between horizontal and vertical screens is small. Large investment, low effect.

4. Add prompts after switching to guide users to operate and view in a reasonable way

Low investment : just use landscape.js

Good effect : friendly humanized prompts, guide users, and improve user experience

lanscape.js

Introduction

Enable users to give a friendly tip when rotating the mobile phone screen to vertical screen. Sometimes mobile phone web pages cannot prohibit users from rotating to vertical screen. Giving a friendly prompt can eliminate the need to consider the layout of vertical screen and reduce development and maintenance costs. user experience.

How to use

 
          1 
        
          2 
        
          3 
        
          4 
        
          5 
        
          6 
        
          7 
        
         < 
         script  
         src 
         = 
         "http://ossweb-img.qq.com/images/js/landscape/landscape.min.js" 
         > 
         < 
         / 
         script 
         > 
        
         < 
         script 
         > 
        
         var 
           
         landscape 
           
         = 
           
         new 
           
         landscape 
         ( 
         { 
        
         mode 
         : 
         'portrait' 
         , 
         //portrait,landscape 
        
         prefix 
         : 
         'Shine' 
         , 
        
         } 
         ) 
         ; 
        
         < 
         / 
         script 
         >

Parameter Description

 
          1 
        
          2 
        
          3 
        
          4 
        
          5 
        
          6 
        
          7 
        
         pic 
         :图片地址 
          如 
         'http://ossweb-img.qq.com/images/js/landscape/landscape.png' 
         , 
        
         picZoom 
         :图片缩放比例 
          如 
           
         2 
         , 
        
         mode 
         :页面模式，如 
         'portrait'或 
         'landscape' 
         , 
        
         bgcolor 
         :背景色 
         ,如 
           
         '#000' 
         , 
        
         txt 
         :提示文字 
         , 
          如 
           
         '为了更好的体验，请将手机/平板竖过来' 
         , 
        
         txtColor 
         : 
          提示文字颜色 
          如 
         '#ffd40a' 
         , 
        
         prefix 
         :前缀 
          如 
           
         'Shine'