viewport can't satisfy mobile screen? - html

I'm web developer.
I developed my mobile website use 'viewport' option in html for responsive mobile website.
Then, I assigned meta data like this below:-
<meta name="viewport" content="width=320"/>
But my web site occurs right margin(below pic is part of my web site menubar)
How can delete right margin? .... Thanks for your help!
enter image description here
....


Write this and try if it works...
<meta name="viewport" content="width=device-width, initial-scale=1">


You can need to change your media query to this and this would difinilty work for your in website. Please vode if i m correct.
<meta name="viewport" content="width=device-width, initial-scale=1">


Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
EDIT:
By giving static width, you are already loosing the responsiveness. Instead use device-width which would automatically take the device's width.
max-scale=1.0 and user-scalable=no wouldn't allow the user to pinch zoom on the mobile. If you want to let the user zoom in on the website, you can remove these two

Related

iPhone Mobile Safari meta viewport

when opening a website in iPhone Mobile Safari The full screen does not appear.
I tried this, but the problem still exists.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

What do you mean by full screen? Do you mean like you want it to be mobile friendly? or...

Have you actually tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0">? instead of all those over things that you added in.

Responsive bootstrap not working?

My site is rainychat.com.
I made it responsive with bootstrap for mobile, and when i try it on my pc by making my browser smaller to imitate that it looks fine:
However when i try it on my phone it doesnt work properly:
Why is this happening? The website is live on rainychat.com

Did you use this meta tags?
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

iOS6 displaying site too large when using initial-scale=1.0 and maximum-scale-1.0

When I remove initial and maximum-scale out from the meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no" />
tag, iOS 6 Safari is diplaying the site too large. I have to take the initial and maximum out for it too fit correctly. Is it acceptable to leave the viewport tag like this? I haven't tested on other mobile devices.

I use the following for ensure proper sizing on all mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In some cases, I will adjust the initial-scale down a minor amount to ensure the proper scale:
<meta name="viewport" content="width=device-width, initial-scale=.96"> // Scale as needed

meta name="viewport" doesn't work as expected

I have that meta tag in my website www.ssd-vergleichen.de
<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>
To prevent the device from initial zooming into the website.
When watching the website on my chrome mobile browser on Samsung Galaxy S2, the website is beeing zoomed in about 400%.
What did I do wrong? Can anyone help?
Thanks in advance
Edit: With using
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
it works in Android's standard webbrowser, but still not in Chrome. I wonder if it works in IOS?
Edit2: No, it also doesn't work with iOS http://iphonetester.com/

Try this :
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

Have you tried
<meta name="viewport" width="device-width">
As I understand it width="device-width" constrains the width of the layout to the device width. Surely setting intial-scale=1 is then telling the browser to zoom 100% (i.e. not scaled)?
Update
<meta name="viewport" content="width=device-width, initial-scale=1;"/>
Is intended to be used to scale responsive sites correctly. Considering your site is fixed to a width of 1100px, setting initial-scale=1 will not result in the whole page being visible.
From the W3C Use Meta Viewport Element To Identify Desired Screen Size

Try:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
with no ;

I had the same problem today and I was able to fix it by toying with the target-densitydpi attribute and setting it to high while setting the width to device-width
Like so:
<meta name="viewport" content="initial-scale=0.8, zoom=10%, width=device-width, target-densitydpi=high-dpi">
This solved my problem.

Try this:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
In CSS put this:
html, body {
max-width: 100%;
overflow-x: hidden;
}

You should write
<meta id="viewport" name="viewport" content="[your_content_params]" />
I tried this and it worked.

Make a website responsive only on iPad - how can I NOT output the viewport meta tag for iPhones...?

I have a responsive website built on top of Bootstrap. However, I only want it to be responsive on the iPad - the iPhone should show the regular, full site.
In my <head> I am using:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But I only want this to be output if the device is not iPhone.
However - this needs to be static HTML - so I can't use PHP or anything server-side. Any ideas?

try this.
<meta name="viewport" content="width=1024, initial-scale=1, minimum-scale: 1, maximum-scale: 1">