I have tried every variation I can think of to try and get my site to show up correctly on mobile. I've entered these codes into my head tags, but to no avail:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />
And all other variations! Nothing makes me able to change the original look of the site on mobile, or allow me to zoom in or out! I have no idea what to do next. If there's ANY advice you guys can give, I'm desperate.
The site is www.justthestork.com
Sounds like you want your site to load as it does on a desktop browser but zoomed out? In that case you want to give your content a constant width that's larger than the screen size:
<meta name="viewport" content="width=1024">
This means that your page will layout into a window that's 1024 pixels wide (you can adjust the width to see what looks best). The browser will then zoom out until it fits on the screen.
If you don't specify a viewport <meta> at all, the browser will pick a default width (e.g. 980px).
Try this one here, it should force the correct screen size:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Related
For some reason I can't seem to find help on this from searching the internet... perhaps I'm not wording it well.
I've had this problem come up previously, but for right now it's on this website:
http://merchantbankingresources.com/
You can see in the screenshot that the website is pushed to the left and very narrow. It's on an iPhone 4s.
The proper sizing of the page is controlled by the viewport meta property. Adding something as below to your website's head would scale your website automatically to the device width.
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
After putting it in, you can make your page occupy whole page with width:100%;.
EDIT- The <ul> in your gform is actually causing the problem. It is rendering to a wrong position.
EDIT- Change the .gform_body css. It gives it a left of 500px
Try adding this code in the HEAD
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="cleartype" content="on" />
I thought this was a classic case of the html, body not wanting to stretch, but the issue lies within the page itself.
Here is my website, www.offergrind.com
I made it fully non-responsive but the problem is that if we view it in mobile it is displaying the top left part.
Is there any code such as
<meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
What should i do to make the website to display fit in mobile view ?
Start with this. At minimal, it will make your website fit the device, but everything will be sized down.
<meta name="viewport" content="width=device-width">
You should also look in CSS pre-processors, I was blown away by how many CSS files you reference.
I would get rid of the viewport meta tag altogether. If your website was not designed to be responsive, it will only make things worse. See this for more:
Stop using the viewport meta tag (until you know how to use it)
Use the below meta tag for your website
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
The meta tag above explains everything:
width="device-width" width of the website is equal to device width
initial-scale=1.0 means the website will not scale to fit the device screen
when we set minimum-scale=1.0, maximum-scale=1.0 and user-scalable=0 means user will not be able to scale the webpage (it will turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. )
I'm having a hard time finding the right viewport that works for all phones. What I'm trying to do here is that my regular website (not mobile) to scale to fit the window without having to pinch zoom out. Any ideas on viewports?
My current is.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This will work on iPhone.
<meta name="viewport" content="width=device-width" />
How is your website's layout? do you have a specific width for your content (like apple.com)?
if so, use it in your viewport meta tag.
if your website is flexible, like amazon.com for example, use content="width=device-width, initial-scale=1.0" and give body width:100%;. you can do that with a media query if you don't want to affect your desktop version. (http://stephen.io/mediaqueries/)
I'm trying to make my site more "responsive" on mobile devices.
http://healthybodyguru.com
I've tried a lot of variations of the "viewport" meta tag, which is currently:
<meta name="viewport" content="width=device-width, initial-scale=1" />
But for some reason on my HTC Vivid, the page loads quite zoomed in:
Any ideas how I can adjust the viewport so the page is 100% visible on my Android?
Maybe try something like this:
<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1"/>
I'm still trying to understand the viewport to be honest. But I think, I maybe got it now. The viewport width should be set to the default viewable width of the content. For example: If you just have an <img/> with width: 320px, than the image will be fullscreen if you use the code above.
initial-scale=1
Is causing it to load zoomed in. You can either remove it, or replace it with maximum-scale or minimum-scale (for whatever you're trying to achieve).
This code is working for me great ... I hope it will work for you too ...
// fit the width of screen
myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
// remove a weird white line on the right size
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
I'm working on coding a mobile-dedicated website (i.e. m.example.com), based on a design with a width of 640px.
How do I go about starting to code a mobile site in terms of:
the meta viewport
pixel-based widths
Which viewport do I go about using? I've seen many arguments online about the differences between:
<meta name="viewport" content="width=device-width, user-scalable=no">
and
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
Also, do I set the body width in percentages or set it to a fixed width for mobile, like 320px? How do I take a design that is designed at a width of 640px to properly display at 320px?
I would actually just use the following:
I guess that you could still set the width to the device specific width, along with the initial and maximum scales.
Honestly, I don;t think that including user-scalable makes any difference.
I have tested the above on iPhone, Android and Windows Phone and it works like a charm.