I am working on ipad application(using Asp.net framework and HTML5).
I can't do pinch-in and pinch-out of my application.
I have used the meta tag also but still it didn't help.
By default ipad provides pinch to zoom on safari. But for the application on which I am working on, its not happening at all.
Below is the meta tag which I am using
<meta name="viewport" content="width=device-width, initial-scale=1"/>
How can I achieve this?
Add minimum and maximum scale parameters to the meta tag, just like below
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0">
Try The below head section and let me know what happens,
<!DOCTYPE HTML >
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.6,user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="YES">
</head>
<body></body>
</html>
For solution have a look at these links:
http://chillburn.com.au/blog/enabling-the-pinch-zoom-for-the-ipad-iphone-while-using-jquery-mobile/
jquerymobile.com/test/docs/api/globalconfig.html
Related
I'm trying to get the large image card to work with a website. The metadata is being read correctly, but it's displaying the small summary card, instead.
My metadata:
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="volkischexe.com">
<meta property="twitter:url" content="/germania/index.php">
<meta name="twitter:title" content="Germania: An Introduction">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="http://volkischexe.com/res/cards/germania-intro.png?605a78eeba1aa">
<!-- OpenGraph Card -->
<meta property="og:type" content="website">
<meta property="og:url" content="/germania/index.php">
<meta property="og:title" content="Germania: An Introduction">
<meta property="og:image" content="http://volkischexe.com/res/cards/germania-intro.png?605a78eeba1ae">
<meta property="og:description" content="...">
<!-- HTML Meta -->
<title>Germania: An Introduction</title>
<meta property="og:url" content="http://volkischexe.com/germania/">
<meta property="og:image" content="http://volkischexe.com/res/cards/germania-intro.png?605a78eeba1b1">
<meta property="og:title" content="Germania: An Introduction">
<meta property="og:description" content="...">
<meta name="description" content="...">
<title>Germania: An Introduction</title>
Twitter seems to see my metadata correctly, too:
What am I missing here?
ETA: The validator doesn't show my cards correctly, but if I actually tweet them, they show up just fine. So there's something going on with the validator, but as long as my cards show up on Twitter, I'm good.
There are a few things that could be stopping Twitter from sharing a large card for your site:
A couple of your twitter meta settings use “content,” but twitter wants “name.”
Your site is redirecting to https, so use the secure version for the URLs in your meta information.
It’s good to include the image sizes for Facebook.
And you don’t need the index.php file name – your server will automatically serve up the index.php file.
Try replacing your code with this:
<!-- OpenGraph Card -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://volkischexe.com/germania/">
<meta property="og:title" content="Germania: An Introduction">
<meta property="og:image" content="https://volkischexe.com/res/cards/germania-intro.png?605e46b26abc5">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="From where does the modern Western world derive its values and morals?">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="volkischexe.com">
<meta name="twitter:url" content="https://volkischexe.com/germania/">
<meta name="twitter:title" content="Germania: An Introduction">
<meta name="twitter:description" content="From where does the modern Western world derive its values and morals?">
<meta name="twitter:image" content="https://volkischexe.com/res/cards/germania-intro.png?605e46b26abc1">
One thing (that may or may not be impacting Twitter) is the start of your page is missing DOCTYPE and some other stuff:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Germania: An Introduction</title>
<meta name="description" content="From where does the modern Western world derive its values and morals?">
<link rel="preload" href="/res/AndBasR.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/res/CelticHand.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/res/Norse-Bold.otf" as="font" type="font/otf" crossorigin>
<link rel="stylesheet" href="/res/main.css">
<script src="/res/main.js"></script>
One thing with the Twitter card validator — sometimes is doesn’t rescrape your site when you click the Preview Card button. You may need to restart your browser (closed and reopened) and rescrape a couple of times to get it to load the new version.
I've started building a site for a friend, looks great on desktop, and great when I change the browser window size but seems to be zoomed out when I open it on my iPhone?
Any ideas why? Here's the link to the temporary site, if you change browser size to mobile that's how it should look.
http://torwood.footholds.net/~acoustic/
In the header you have:
<meta name = "viewport" content = "width=device-with, initial-scale = 0.1">
which is telling it to start with an initial zoom of 10%
Change it to:
<meta name="viewport" content="width=device-width, initial-scale=1">
Edit:
In fact, for best compatability you should include all the relevant headers:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: http://getbootstrap.com/getting-started/#template
I'm working on a website right now, it's tiniglesias.com ... and everytime I try to use my iphone to check it, it is automatically zooming in.
I've already deactivated all of my plugins to check if any of it is causing this to happen, but it is still zooming in.
I've also tried using the meta tag
<meta name="viewport" content="width=device-width" />
Still not working.
Help would be greatly appreciated.
Try:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Update:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I'm working on a responsive, Bootstrap 3-based design. When I resize the browser window on my desktop, everything behaves as expected, but when I went to look at it on my iPhone it doesn't collapse the menu as it should, among other things.
http://www.craftonhills.edu/Testing/ksimonso/Mobile_Site_Page
You need to add the viewport tag to your header:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You're missing the viewport meta tag within your <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I am using jQuery Mobile in PhoneGap. It is working fine in all browsers, but in mobile the view is very small.
I have used
<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">
in my html page, but then it is also very small.
just try
content="width=device-width, initial-scale=1"
Try this
enclose the below element in you head part.
<meta name="viewport" content="width=device-width, initial-scale=1">
You can find the below details in the following page.
http://view.jquerymobile.com/1.3.0/docs/widgets/pages/