So, I created a child theme for an HTML5 blank boilerplate theme. Well, when I go onto the site with my mobile phone, the site is super zoomed in and it does not allow you to zoom out. I am sure it's somewhere in the functions file, if someone can help me find it I would greatly appreciate it!
The site is: www.allcementwork.com
The reason why you can't zoom in or out is because of this line:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
You're setting the maximum scale to 1 and user-scalable to 0, which means the user can't pinch to zoom in/out. Remove this and it should work as intended.
Related
I hosted a website (ninacressoni.com) and on my brackets, where I edit my website, is fully responsive. But while online, the responsiveness of the mobile disappears.
See, when I just minimize the screen on pc (brackets or website), it responds the way I want. But when I go on inspect ON the website, the mobile screen view is gone. And that is how it looks when I enter my site on a cellphone.
On brackets, even if I open inspect, this responsiveness continues. But on the site itself, it doesn't.
Can someone inspect my code and help me with this situation??? This has been very frustrating since I can't seem to find an answer.
I use Hostgator and they use Cpanel.
Could this be an error at their host services or could it be programming related?
Ps: Already talked to them and their primary guess is that is a problem with the programming (It seems it isn't because on my brackets the website works and online it works only if you just screen size it without inspect, with inspect nothing happens the way it should on mobile screen and that's how my website appears on a mobile) and in order to get a more advanced help I would need to pay extra.
(Tried explaining with details)
Can someone help this girl out? DESPERATE!!!
Your site is missing an important meta tag
<meta name="viewport" content="width=device-width">
More on responsive meta tag here - https://css-tricks.com/snippets/html/responsive-meta-tag/
Once this is added, this is what I see on my browser with Inspect Element active
Since your question lacked any sort of explanation on how the site should look on mobile device, I assume this is what you want the site to look after all.
I'm very sorry that I'm bothering you with this, but I couldn't find any answers to this search query on Google.
So let me explain my problem really quick.
I've created a webpage that changes between portrait- and landscape mode.
When I use desktop it's perfectly fine, the page displays correctly. When I launch my webpage on my IPhone 5 it does something "weird":
it only partionally displays the page. If I want to see the entire page I need to zoom out, which is quite annoying for users.
So if you guys know how to resolve this problem, please tell me!
Thank you so much for helping me out!
EDIT:
I am using the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag
For optimizing the css for mobile devices, I used the media query
#media screen and (orientation:portrait) {...}
ANSWER:
This is the cause of my issue: Reset zoom level onload. Sadly, it's not
yet possible to fix this problem... This is the case because I have a
login form on a previous page that links to a new page whenever I log
in. With IOS your browser automatically zooms in at the input, which
when the new page is loaded, still is the zoom level...
Using <meta name="viewport" content="width=300"> should make your webpage automatically zoom all the way out for almost all mobile devices. But make sure that your site is mobile-optimized, otherwise all of your text will become tiny and people will wish that they had zoomed in again.
This is the cause of my issue:
Reset zoom level onload
Sadly, it's not yet possible to fix this problem...
This is the case because I have a login form on a previous page that links to a new page whenever I log in. With IOS your browser automatically zooms in at the input, which when the new page is loaded, still is the zoom level...
I'm making a prototype sight currently that is static (as in when the screen is resized smaller such as 480 pixels the sight does not responsively adjust its elements ). I actually don't want the sight to be responsive I want it to behave as apple.com does. Apples site is a large zoomed out overview of the site allowing the user to zoom in on what he/she wishes to. Whenever my sight is loaded on my iphone it is zoomed in to a tip corner of the site. When I apply zoom:.5 to the css it zooms out just as much as i would like it to in IE and chrome but does not in Firefox. Obviously that's a major problem being firefox is a very popular browser and i am having difficulties finding an alternative. If any one could offer any amount of alternatives (even using javascript) it would be much appreciated.
If I understand you correctly, you need to set the viewport meta.
Add the following to the head section of your site:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This will set the initial zoom to fit the entire page, while allowing users to zoom as they please.
this is quite easy...
just do all your code in old fashioned pixel measurements
and nothing will resize and it wont be responsive at all
I have a responsive website that I think looks best when it's 500px or larger, so I set the min-width to 500px.
However, I'm testing it on a 320px phone and pages have horizontal scroll, forcing me to zoom out if I want everything on the screen.
Is this a device issue? Or is there some code I can use to make my site shrink by default? (instead of having to zoom out each time I navigate to a new page)
<meta name="viewport" content="width=device-width, initial-scale=.6">
Then just adjust scale to fit what you need
I used bootstrap in my pages, it save you this hassle, try it it is very helpful in many ways.
from here.
and also has many other futures.
this is a google search for free wordpress templates.
I have a very basic html site I created for my wedding: http://www.johnloveslesley.com/home.htm
I have never tried to create a mobile-adaptive website. I don't feel the need to do so for this, really just a fun little practice project for me.
However, here is my question. When I open the page on my iphone, and zoom in to look at the page - once I've navigated to a NEW page, the browser zooms back out.
Is there a simple code for maintaining the magnified navigation between pages?
Please let me know if I can be more specific with my question.
Thanks!
See mdn.
<meta name="viewport" content="initial-scale=1">
Please disregard AndyM's answer as it tells you a) that you can disabled zoom b) that it's terrible, but he doesn't care, and c) that you shouldn't care either, because people all want the same size of everything, and you shouldn't care about their opinion on zoom level. Disabling zoom seriously hurts UX.