I tried searching for the better part of three days, but maybe I'm not asking my question right so I decided to try here.
I'm currently developing a website that I feel looks amazing, however on the iPad it's zoomed in with a ratio of 1 to 1 from the start. I cannot for the life of me figure out what is causing this problem. On other websites that I built the iPad simply scales the view to fit into its viewing area. But sadly that is not the case for this.
Here is the website currently
I'm developing on Wordpress, using the Genesis Framework. Can someone please lend a hand?
You should use the Viewport meta tag to specify how you want your website to behave on different screens:
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
It's the viewport meta tag that does this. Here's the one you are using:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
Related
I'm running Facebook Ads for one of my clients, however, his website is quite old and there are a few pages that aren't being responsive in mobile version. I know basic HTML & CSS, enough to do simple coding but am not sure where to start with this issue.
Issue: The linked pages are below with images attached. In mobile version the main content div is basically only taking up three quarters of the screen. The rest of the client's pages are fine (occupy the whole screen) when on mobile.
http://stkildafitnesstrainer.com.au/our-trainers.html
http://stkildafitnesstrainer.com.au/services.html
Thanks for your help
Edit:
Seeing the comments below, and as I was too young to care about disabilities. I'm sorry, this is the new answer:
Simple, add this in your head:
<meta name="viewport" content="initial-scale=1">
initial-scale, as the name says, define which scale your website will be rendered.
There is also other parameters to the content tag:
width=device-width sets the <body> width to be the same of the device, just like height=device-height is the same for height.
user-scalable=no, this says you are not able to zoom the page AND IT'S NOT RECOMMENDED, you can also set this parameter to yes.
I have been using the materialize css framework to style most of my apps recently. When I loaded up the app I'm currently making on my phone it appeared way more zoomed out than it normally does. (See top two photos). The way it previously looked was much more zoomed-in and large (bottom two photos).
I've tried searching around for solutions but I'm not too sure what I'm looking for in terms of a setting that might be different between the two materialize releases or something.
Basically, how can I get my current site to render larger like the old one does? Is this in a media query somewhere?
I haven't changed my styling between these two apps. Really not sure what would have changed.
Thanks for any help!
Are you missing a viewport meta tag in your HTML?
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I'm building an application and by far the weakest part of my game is Style and Design. But, I'm having one particular problem at the moment. I'm trying to make my dashboard responsive but when I look at the dashboard as an iphone 6 with my chrome inspector the screen zooms out really far and everything breaks... Here is a screen shot of what I mean.
See how the content is really far away... I really don't know how to fix this? Any idea what I could be doing wrong?
Please try to add this to your HTML's <head></head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Reference: w3schools
I'm getting some weird behaviour that I'm not sure why it's happening.
I'm building out an site. When running this locally in Chrome and Safari, it displays fine, everything adjusts as you'd expect. However, in responsive mode, and when viewed directly on mobile, the entire site is scaling down in size to fit. By this I mean the entire site every element all reducing in size to to be shown as it looks at desktop size.
I'm using Bourbon/Neat, with a bit of flexbox here and there, which I have done many a times before. I've just never experienced this. Any ideas?
You likely need to add
<meta name="viewport" content="width=device-width, initial-scale=1">
to the <head> section of your html
Jordan's answer is in the right direction but it didn't work for me.
There is another post here on Stackoverflow that has a more comprehensive meta tag, that fixed it for me:
Small fonts in mobile website
I am using dream weaver to create a responsive about me page for my site (using the default about me template). When I use the dream weaver on-device previewing system, the page is fully responsive and on my iPhone it resizes perfectly fine to look like this:
However, when I upload the code to the website, the page no longer becomes responsive. It simply looks the same as it does on my laptop (as shown below)
Why is this issue occurring?
The html page is this. If you need me to post the code here as well, please tell me. Your help is much appreciated :)
For media queries to work on small screens, you need to include the viewport meta element in the head of your document. E.g.:
<meta name="viewport" content="width=device-width, initial-scale=1">