0

I have a problem with one page on mobile devices

It is a fact that some of the subpages of this site are partly enlarged.

It is interesting that the part of the page is enlarged in the source code.

Screenshot

Unfortunately it does only some pages.

web is to: www.kitelementshop.com

A page that displays poorly on mobiles as: link1 link2

Very interesting is that the two products are displayed differently and are on the same template. bad show good show

finally resolved by switching the viewport, but only masked the problem unsolved

Any idea? Thanks

Pesulap
  • 884
  • 8
  • 19

1 Answers1

-1

You are missing a viewport meta tag:

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

With that the phone knows which scale it needs to start with and computes the font-sizes accordingly.

If you try inspecting it without the viewport meta tag you can see that the font is computed to 39px! With the viewport tag its calculated to 12px - the value that you have put in your CSS.

Rolchau
  • 94
  • 1
  • 7
  • I tried that too, but first it does not work gallery and page loads always approximations. Another thing is that now I have added

    Testovací p

    tag to the header, body and footer, and only in the footer is displayed correctly.     – Pesulap Jan 30 '14 at 09:46
  • Well the viewport tag doesn't fix all the other issues - thats right, but it fixes the font issue - which was the question. You have put a lot of fixed width's in your page f.ex. 1000 px on a lot of elements - 1000px's remains 1000px whether or not its a desktop or a mobile device - hence the phone needs to scroll. What you need to do it completely rewrite most of your CSS im affraid - or rather just forget about supporting a mobile device. Sorry but its not that simple. – Rolchau Jan 30 '14 at 10:30