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" />
Related
I'm starting to grow desperate. I want to show a WhatsApp preview image for a link people can share. I tried everything I could find here or on Google. It STILL doesn't show up. This is is my current state of things:
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>My Site</title>
<meta charset="utf-8">
<meta property="og:type" content="website" />
<meta property="og:title" content="My Site" />
<meta property="og:site_name" content="My Site" />
<meta property="og:description" content="This is really My Site">
<meta property="og:url" content="https://www.my-site.com/subdir/" />
<meta property="og:image:secure_url" itemprop="image" content="https://www.my-site.com/subdir/ogthumb.jpg">
<meta property="og:image:alt" content="My Site Preview">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
Some of those headers are probably unnecessary, but I put all things together I found from different answers here or from external sources.
I also chose a low resolution (different max dimensions suggested in different sources, but this 256x256 should be fine according to all) as well as low image size (again, different max sizes suggested in different sources, but I got only 30kB and this should be fine according to all sources).
Please, kind people, can you show me what is still missing? My sanity thanks you.
So i have problem with a different display website on PC and mobile phone.
My viewport looks so:
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />
window.innerWidth on my Samsung Galaxy returns '360', but:
so looks element in google chrome device mode
but that's how looks it actually on my device
So what's the matter?
Try to add comma before maximum-scale
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
I have a block of html code, which is mainly meta tags. I'm trying to re-design my layout for mobile devices, so I want to know if the meta tags that I'm using are necessary for a mobile layout. The block of code is provided below:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<title>ConquestRealms - Home</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="cleartype" content="on">
whether or not they are necessary depends on what "mobile" device you are trying to target.
I've used as little as:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
and achieved decent results across a number of mobile devices using just Respond.js and #media queries.
may be helpful:
http://www.alistapart.com/articles/responsive-web-design
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices
https://github.com/scottjehl/Respond
What you have is already pretty good, but do not forget to add <!DOCTYPE html> at the top of your html file. I found that there have been cases where this has significantly effected the look on a mobile device.
I like to include design meta-tags also. Not mentioned in previous responses. They allow full screen display and change the color of the browser bar. Nice!
<meta name="theme-color" content="#ff0000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My Web App">
<meta name="apple-mobile-web-app-title" content="Mobile rules">
<meta name="apple-mobile-web-app-status-bar-style" content="red">
i've build my app using phonegap online builder, and it works properly on android but on a blackberry device (9800) and after the splash screen it shows a blank black screen with a white horizontal bar (about 5 px ) on the top of screen and nothing else.
anyone can help me please ?
thanks
I was having this issue and I found that once I ensured this was in the head it worked:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
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;" />