Viewport 2/3 empty with 1/3 scaled down - html

Why wont the URL http://beta.dealer24x7.com fill the screen on my Windows Phone?
What CSS or META tag am I missing?
Thanks

Try adding this meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" />

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.

Zoom in/out doesn't work on my mobile phone (Blogger)

I try to add the text below on my head-tag, but the zoom in/out is not working on my mobile phone.
<meta content='width=device-width, initial-scale=1' name='viewport'/>
ex: http://chenweilun.blogspot.tw/2016/11/test.html
It works, but when I add the following text in my article:
<meta content='width=device-width, initial-scale=1' name='viewport'/>
ex: http://chenweilun.blogspot.tw/2016/07/blog-post.html
It stops working. Did I miss something?
There is some reference link about the zoom in/out on blogger: http://fuseinteractive.ca/blog/avoiding-landscape-zoom-in-effect-on-mobile#.WCgKs_B97IU
In Blogger template they set the scale by this meta tag
<meta expr:content='data:blog.isMobile?quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0":"width=1100"' name='viewport'/>
Replace the above with the next meta tag after your <head> element directly to allow user-scalable. you can also change the maximum-scale value.
<meta content='width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes' name='viewport'/>
first of all
sign in your blogger.
and go to the Theme Section.
next edit HTML.
search " Viewport ".
and you got something like :
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
And Replace with :
<meta content='width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes' name='viewport'/>
thank you :)

meta name="viewport" doesn't seem to have effect

I've placed this tag on my website:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And on Firefox and Chrome for Android the site looks like this:
While I'm expecting it to look like this:
What am I doing wrong?
I've also tried the solutions in this post, but nothing helped.
This tells the browser to render the page at the same width as the device's screen has pixels:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
It sounds like you'd prefer to render at some other width, like maybe 800px:
<meta name="viewport" content="width=800, initial-scale=1.0" />

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.

How to disable zooming in Windows Mobile?

Is there some way of disabling zooming in Windows Mobile smartphones? For example HTC Titan.
I have this in my head html section:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
But I am still able to zoom in and out.
<meta name="viewport" content="width=device-width" />
The setting you have in your question is correct and works on Windows Phone as tested on both my Nokia Lumia 900 (Tango) and Dell Venue Pro (Mango).
If you're having problems with the dynamic viewport setting you can try setting the resolution directly.
<meta name="viewport" content="width=480" />
Reference: Windows Team Blog: Windows Phone Viewport
<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />