Google Ad

Mobile Usability issue fixes for Google (Solved)


Make your web page mobile friendly.

Google is holding Mobile Usability issues for mobile site.

Here I give solution to fix the issue.

 

Viewport

Make sure that you have added following viewport code on your site between <head> </head>

 
 
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

Body

Keep your site body in 100% which will match with Mobile devices Resolution.

That’s why you can use following code.

 
 
  1. <html>
  2. <head>
  3. Here put CSS, Javascript, Sitelogo etc..
  4. </head>
  5. <body>
  6. Your contents here
  7. </body>
  8. <footer>
  9. </footer>
  10. </body>
  11. </html>

 

Now use following code for <body> 100% wide for Mobile User. Use following css

 
 
  1. body {
  2. height: 100%;
  3. }

 

Example:

 
 
  1. <html>
  2. <head>
  3. <style>
  4. body {
  5. height: 100%;
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. Your contents here
  11. </body>
  12. <footer>
  13. </footer>
  14. </body>
  15. </html>

 

Image

 

Use following css for Images match with devices

 
 
  1. img {
  2. width: auto ;
  3. max-width: 100% ;
  4. height: auto ;
  5. }

 

Example:

 
 
  1. <html>
  2. <head>
  3. <style>
  4. body {
  5. height: 100%;
  6. }
  7. img {
  8. width: auto ;
  9. max-width: 100% ;
  10. height: auto ;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <img src="https://file1.horje.com/data/user1/a3991535-7372-4eca-8b96-1601d00bfa5d.png" alt="" title="" style="">
  16. </body>
  17. <footer>
  18. </footer>
  19. </body>
  20. </html>

 

Youtube video iframe or other iframe, Use following css.

 
 
  1. .video-container {
  2. position: relative;
  3. padding-bottom: 56.25%;
  4. padding-top: 30px; height: 0; overflow: hidden;
  5. }
  6. .video-container iframe,
  7. .video-container object,
  8. .video-container embed {
  9. position: absolute;
  10. top: 0;
  11. left: 0;
  12. width: 100%;
  13. height: 100%;
  14. }

 

Example:

 
 
  1. <html>
  2. <head>
  3. <style>
  4. body {
  5. height: 100%;
  6. }
  7. img {
  8. width: auto ;
  9. max-width: 100% ;
  10. height: auto ;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen</iframe</div>
  16. </body>
  17. <footer>
  18. </footer>
  19. </body>
  20. </html>

 

Now Test on Google Mobile Usability Test URL

 

If you have any question then ask following.

 

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *

"