Viewing Mobile Page displays too large

Mobile Page displays too large



User: J. Christopher D. 6 years ago
When opening my website on my iPhone, it appears off-center and sized incorrectly for the screen. I’d rather have display/fit appropriately.

http://www.jchristopherdunn.com

Based on feed back from ’Test My Site with Google’ I’ve added the following code to header of the Mobile page.

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



What can I do to correct the display/fit issue?

Thanks!

IMG_6680.png
How the page displays
IMG_6681.png
How I want the page to display
User: Michael S. 6 years ago
It's fine on my Samsung Galaxy S8
User: Roddy 6 years ago
You have errors in the meta tag. See THIS page for the correct code.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Ana F. 6 years ago
hallo, try to add this code:
<meta name="viewport" content="width=device-width"> ( without the initial-scale=1) = that worked for me

this is what I added to my site:

<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<meta name="ResourceLoaderDynamicStyles" content="">
<meta name="format-detection" content="telephone=yes"/>
<meta name="HandheldFriendly" content="true"/>

Last edit 6 years ago
✔ Best Answer  
User: J. Christopher D. 6 years ago
Ana F.-

Thank you! Removing initial-scale=1 corrected the display issue.

I'll run it through Google's test (it's been a while) to see if it calls anything out.

-Chris
User: Ana F. 6 years ago
Chris -

I am happy to read that :)

you can also try this site - a free test a day https://seositecheckup.com/
or you can test it here: https://website.grader.com/ - i love that site

feel free to check my site https://www.ajda-zagreb.hr/ ( proud of my improvements )

Ana

Last edit 6 years ago
User: Roddy 5 years ago
There seems to be quite a bit of misinformation here.

The viewport meta tag is only required for responsive pages. Fixed width mobile pages do not need it since the viewport width is set to the page content width defined in EverWeb.

For those creating responsive pages from code, insert the meta tag like this ...

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

... and don't edit it in any way.

Those using responsive widgets don't need to worry about it as the correct code is built into the widgets.

Apple have extended the viewport meta tag to cover certain situations with the viewport on the iPhone X ...

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

The format detection meta tag ...

<meta name="format-detection" content="telephone=no">

... is not used on pages designed for phones. It is used for pages that will be displayed on iPads and prevents telephone numbers from being converted into hyperlinks with the browser default link color and an underline. Note that content="telephone=no" and not "yes" as shown in a previous post.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Ana F. 5 years ago
Hi Roddy,

If I make the changes as you say - my view on the mobile device is too big...

The above change of code solves that problem for me

Ana
User: Roddy 5 years ago
You shouldn't be using the viewport meta tag at all. It's only used on pages that have a responsive width.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Ana F. 5 years ago
I will leave it the way I have it now - I do not like to scale my website on my phone every time I go on it - I hate that on other websites and won't have that on mine...
User: Julie D. 5 years ago
Hi I have the same issue, every mobile pages display too large... I used exactly the same pages of my old website that was working well except I added the "mobile header Logo Nav Widget" (hamburger menu) with full width checked as it should be used. I think the issue come from this widget! My mobile site is set to centered layout 480 pixels width. What should I do to solve this issue? Thanks! Here is my website : www.juliedesmaraisdesign.com

Last edit 5 years ago
User: Julie D. 5 years ago
Problem solved by adding <meta name="viewport" content="width=device-width"> to my mobile pages thanks Ana !
User: Roddy 5 years ago
As I pointed out above: "You shouldn't be using the viewport meta tag at all. It's only used on pages that have a responsive width."

If you have to use it, then there's something else wrong with the page layout.

Now that EverWeb can create responsive pages - even if you don't want a fully responsive site - it would be worth while converting the mobile version of your site to responsive since mobile phones come in so many shapes and sizes.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.