Why Is My Website Cutting Off On Mobile Devices?

July 02, 2024 Post a Comment

I created this website with the original intention of having it be mobile. However I've had to take that function out and for the time being just wanted to have it so when you visi

Solution 1:

In your case you should not use any of the suggested meta viewport tags. If you leave the page without any meta viewport tags you should get the desired result in most mobile browsers.

You could add <meta name="viewport" content="width=980"> to tell the browser that you content is 980 px, if that is the case. You seem to have a 960 px wide page but it may look nicer to have some spacing on the sides.

I find this to be a nice article to explain the meta viewport tag

And this is another article about using the meta viewport tag for non-responsive pages

The meta viewport tags that you have tried tells the browser a few different things:

<metaname="viewport"content="width=device-width" />

This tells the browser that content width should fit in the device width. In order to use this successfully your page width should be adjustable to the device.

<metaname="viewport"content="initial-scale=1, maximum-scale=1">

This tells the browser that it should zoom the page so that 1 CSS pixel from the page equals 1 viewport pixel on the screen (not physical pixels on e.g. Retina displays). This results in your page being zoomed in as it is wider then a normal mobile screen. Maximum-scale also tells the browser not to let you zoom the page any further than that.

<metaname="viewport"content="width=500, initial-scale=1">

This tells the browser that the content is 500 px wide and that you should zoom the page.

Solution 2:

I didn't find a css for mobile devices in your themes style.css file. Please write some css for various device like android, iphone, ipad, tablet pc etc.

Example:

* @media Rule */
@media all and (max-width: 1024px) {hereisyourcsscode}

@mediaalland (min-width: 800px) and (max-width: 1024px) {hereisyourcsscode}

@mediaalland (min-width: 320px) and (max-width: 780px) {hereisyourcsscode}

I think it will help you to understand responsive css design properly.

Thanks

Solution 3:

If you want it to looked zoom out, then remove the viewport restrictions. It is limiting your field of vision and preventing it from sizing your site correctly.

You should only use the mobile viewport if you are reorienting your content based on screen resolution, like the previous example for responsive design.

Solution 4:

I think you want the look of website in mobile same as you look in the Desktop. as i can see the screeshot you have provided. For that REMOVE the Viewport code which you have putted in header. Also be sure of if some tags are not correctly closed. it might be cause of the issue.

Solution 5:

Try only one of this Meta Viewports each time, remove the others.

Try this first: <meta name="viewport" content="width=device-width" />

Html5 School