What's the comlete version of the zoom disabling viewport meta tag?
I have tried with: <meta name="viewport" content="width=device-width, initial-scale=1">
but it just sets the appropriate scale and doesn't prevent zooming.
I also tried with: <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
But it just doesn't work, I can still pinch zoom on my mobile.
It finally worked using that this way:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
You can use this:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
Related
The website tested is https://www.quirksmode.org/mobile/metaviewport/initialscale/1-none.html , I copy the source code to the local, and then modify the meta tag to run.Layout viewport is always equal to visual viewport. Is this a special treatment made by Apple? Under what circumstances can they be unequal?
initial-scale=0.5
<meta name="viewport" content="initial-scale=0.5" />
initial-scale=1
<meta name="viewport" content="initial-scale=1" />
initial-scale=2
<meta name="viewport" content="initial-scale=2" />
width=1000
<meta name="viewport" content="width=1000" />
width=device-width
<meta name="viewport" content="width=device-width" />
width=device-width,initial-scale=2.0
<meta name="viewport" content="width=device-width,initial-scale=2.0" />
width=device-width,initial-scale=0.5
<meta name="viewport" content="width=device-width,initial-scale=0.5" />
I am looking for a way to display an image when the link is posted on Twitter, Discord, etc.
There is a spot for the text but I am not aware of a place for an image.
I am expecting an image to display like this:
This is what I am getting:
The description text was changed in config.yml so is there a parameter for the image there also?
I am unaware of how to make the link preview image appear. Think it might be in the config.yml file.
The description is the description from the head of your website.
<meta property="og:description" content="This is the website that hosts Eshan Iyer’s portfolio and resume as well as many projects that he has created.">
The image is not the favicon as I thought but another meta tag:
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
See https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image
To show it, you need to modify/customize the head file for the minimal theme, either in head.html or in custom-head.html.
I'd try head.html first:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
...
</head>
can you please try to add <meta name="twitter:card" content="summary_large_image" /> and <meta name="twitter:card" content="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
...
</head>
and
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="app">
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
...
</head>
this will resolve your problem, Twitter may take some time to redirect before posting on Twitter validate your link here 2-3 times
my current HTML with this viewport:
<meta name="viewport" content="width=device-width,initial-scale=1">
is providing undesired results such as these:
While deleting <meta name="viewport" content="width=device-width,initial-scale=1">
provided me with another undesirable result as text gets unreadable, like this:
What am I doing wrong?
Have you tried this?:
<meta name="viewport" content="width=device-width" initial-scale="1">
Maybe you need to declare correctly all tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am using twitter bootstrap framework. I want to disable zooming in touch devices. I have already used
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
this. Without bootstrap framework and i can prevent zooming in touch devices, but with framework i'm not. So is there any workarounds to do that.
Thanks in advance.
Write Following code that will disable the mobile zoom disable andy also disable for focus on the any input type
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
If you look at Bootstrap documentation, they have said that in order to disable zooming, you must include the following meta tag between opened and closed head tags:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
As other guys mentioned and also you can find in Bootstrap documentation at http://getbootstrap.com/css/#overview-mobile here is the solution
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Guys thanks for the answers. Actually it was my silly mistake. I had a multiple meta's in the page and it was causing the problem. Below code should work for all.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 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">