Viewing Mobile Page displays too large
Mobile Page displays too large
|
User: J. Christopher D. 5 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. 5 years ago
|
|
| It's fine on my Samsung Galaxy S8 | |
|
User: Roddy 5 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. 5 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 5 years ago |
|
|
✔ Best Answer
|
|
|
User: J. Christopher D. 5 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. 5 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 5 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. 4 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 4 years ago |
|
|
User: Julie D. 4 years ago
|
|
| Problem solved by adding <meta name="viewport" content="width=device-width"> to my mobile pages thanks Ana ! | |
|
User: Roddy 4 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. |