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.
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.
Not able to make my website mobile friendly, even when it looks ok on mobile, what I'm missing?
- I made sure that the buttons are readable,
- The spacing between them is decent,
- There is no content wider than the screen
But I'm still not able to pass the mobile friendly test for my home page: https://www.lsdev.biz/
Any help?
Your site visually looks alright on mobile, however there are a few technical issues that could be improved.
According to Google Pagespeed Insights things to help make your site mobile friendly are to
Eliminate render blocking JavaScript and CSS
Leverage browser caching
Reducing server response time
The link above has details on what specifically needs fixing, and how to fix them.
Mobile friendly is not only about showing good on mobile devices, other factors like speed will definitely influence.
Your website has way more requests than necessary in head which decrease the performance, try to cut some of them and put js files at the end of the page.
Wish it could help
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
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.