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.
Related
My understanding
So my understanding is, if you have a website with the following source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<script src="script-head.js"></script>
</head>
<body>
<img width="400" src="image.jpg" />
<script src="script-closing.js"></script>
</body>
</html>
...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):
style.css
script-head.js
image.jpg
script-closing.js
I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.
All makes sense to me. So far so good.
The confusion
But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.
If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/
It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).
I'm not sure why this is happening.
<!doctype html>
<html lang="en">
<head>
....
<link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
....
</head>
<body class="theme-index">
....
<img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
....
<script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
....
</body>
</html>
My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.
How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.
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?
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>
I was validating my moodle website with the w3c validation service. in it, there is this code that caused a lot of problems:
<!DOCTYPE html>
<html dir="ltr" lang="en" xml:lang="en" class="yui3-js-enabled">
<div id="yui3-css-stamp" style="position: absolute !important; visibility: hidden !important" class=""></div>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Course: Program 1 :title</title>
<meta name="keywords" content="moodle, xxxxxxxxx">
<script async="" src="./test_files/analytics.js"></script><script type="text/javascript">
my question is, can a div tag be inside a tag, but not in a body??
No it can not - it is not proper HTML,
of course it will still work in almost any browser , as most modern browsers are very lenient with improper HTML
It looks like you have it positioned absolutely, maybe I'm assuming because you want it way up on top above anything else. Don't worry - you can still accomplish this behavior inside the <body> tag
While HTML is a flexible and browsers are forgiving, HTML does specify a basic structure. Content in the header contains meta data about the page, as well as resources like CSS the browser should get. The part of the document tree used by the browser to paint the web page should be based on content in the body tag.
Here is a revised sample of your markup to show one way to improve it.
<!DOCTYPE html>
<html dir="ltr" lang="en" xml:lang="en" class="yui3-js-enabled">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Course: Program 1 :title</title>
<meta name="keywords" content="moodle, xxxxxxxxx">
<script async="" src="./test_files/analytics.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<div id="yui3-css-stamp" style="position: absolute !important; visibility: hidden !important" class=""></div>
</body>
</html>
Answer is No its improper way of doing it The page may or may not break depending on browser
No, div tag must be inside body tag.