I tried to shrink and zoom in Chrome it from a mobile browser (I tried it on Chrome browser on an Android and iPhone).
But it's not working.
<meta name=“viewport” content="width=device-width, initial-scale=1.5, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes"/>
I'm not sure if that is the problem.
But, I think that you are using different quptation marks for the name property “” instead of "".
You can also delete the user-scalable=yes as it is the default.
At last, make sure that you declare your page as HTML5 with the <!DOCTYPE html> declaration.
Try using this code instead:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.5, maximum-scale=12.0, minimum-scale=.25"/>
<title>Your Title</title>
</head>
<body>
Your CONTENT
</body>
</html>
Related
I'd like to get some help. The problem is that I continue getting a "div" on my web page without even having it in my code. If I style the "div", for some reason, it appears without being even presented in my code, and it appearts at the bottom of the page. And if I add "div" then it's doubled without any spacing.
I know the question might be really stupid, but I don't really know what to do.
Below you'll find the code and the link to the sreenshot.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bullet-icon.css">
<style>
div {
background-image: radial-gradient(red, pink);
width: 500px;
height: 300px;
}
</style>
</head>
<body>
</body>
</html>
I have checked it in last opera, last chrome and ie 9 - there is no this issue. Seems like it is done by some extension of your browser, browser itself, or http server which you are using.
Try to change browser, then:
if issue still here - check your http server
else - check your extensions
I'm just trying to post a simple html file consisting mainly of some prose I wrote inside of <pre> elements.
Interestingly, when I view the file on my computer with my browser, the quotation marks display fine. But when I upload it to my website, quotation marks are rendered as something like “ or â€. I have looked around the web for solutions but they were few and in between.
I tried to use the meta tag and included
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
to my header but to no avail. Any ideas on how to solve this? It just wouldn't make sense to go back to the content inside the elements and code it into html as the prose is a draft and will go through many changes in the future.
The <!doctype html> tag indicates the file is HTML5 - so the browser will render it as such. lang="en" should be set to the language you are working with. Be sure to use the <meta charset="utf-8"> tag to set the character set in the <head>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template</title>
</head>
<body>
<pre>This is my stuff</pre>
</body>
</html>
Check your code with the browser's View Source and use the Validator at https://validator.w3.org/ to check the page.
Here what I tried.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<pre>Einstein said,"Once you stop learning, you start dying"</pre>
</body>
</html>
I also tried only this
<body>
<pre>Einstein said,"Once you stop learning, you start dying"</pre>
</body>
Still working
I'm running a simple Flask server on Ubuntu, basically a beginner with web apps. When I request a page through Firefox, the screen flashes briefly with the raw HTML before the CSS is applied.
I thought this was a problem with the way the CSS is specified in the HTML (as I found in a few suggestions) but it doesn't seem to be the case because my other browser Brave doesn't have this problem, not even when the CSS resource is requested for the very first time or if I disable caching from the Network tab and refresh repeatedly. It always loads correctly without any flashing or flickering (to my eyes anyways). Below is the current HTML head.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flask Auth Example</title>
<!-- <div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div> -->
<link rel="stylesheet" href="../static/styles/bulma.min.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> -->
</head>
Has anyone experienced this issue and is it browser specific? What is the simplest way to resolve it?
How can I achieve pinch-zoom functionality on a mobile device at a local level (i.e. not the whole page) without needing to use Javascript? So far I can pinch-zoom the whole page through the use of the META viewport tag.
I have looked at CSS touch-action: pinch-zoom but bizarrely it doesn't do what its name suggests at all but apparently serves solely as a modified to other actions which have nothing to do with zooming. However, this page talks about how touch-action is supposed to work to allow native pinch zoom capability in the browser itself, which suggests that it should somehow be possible.
I have already tried to do this with IFRAMEs, but have apparently not hit on the right attributes needed to make it work:
pztest1.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pinch-Zoom Test IFRAME contents</title>
</head>
<body>
<H1>This is a test</H1>
<p>Test, test, test.</p>
</body>
</html>
This page by itself pinch-zooms, but only the entire page. So I put the contents in an IFRAME in another page:
pztest2.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Pinch-Zoom Test</title>
</head>
<body>
<h1>IFRAME test</h1>
<iframe src="pztest.html" height="640" width="480">
</iframe>
</body>
</html>
I am unable to pinch zoom at all in pztest2.html, neither in the body (which is expected) or in the IFRAME itself. If I remove the meta tag from pztest2.html, then I can zoom the body of pztest.html and the iframe with it, but I am unable to just zoom the IFRAME itself, which is the goal.
I am creating a new site. In the head I have
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- for mobile phones -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
However, on mobile devices its large and you have to scroll horizontally. i was expecting it to scale and fit into the width of the device. I have used this before on other sites and it has worked fine.
What's wrong please