Skip to content

Commit 278931f

Browse files
authored
Fix overriding viewport meta tags in reflowable resources (#23)
The meta tag is now injected through JavaScript instead of directly modifying the resource.
1 parent d7873a8 commit 278931f

File tree

4 files changed

+16
-7
lines changed

4 files changed

+16
-7
lines changed

readium/navigator/src/main/assets/_scripts/src/index-reflowable.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,14 @@
77
// Script used for reflowable resources.
88

99
import "./index";
10+
11+
document.addEventListener("DOMContentLoaded", function () {
12+
// Setups the `viewport` meta tag to disable zooming.
13+
let meta = document.createElement("meta");
14+
meta.setAttribute("name", "viewport");
15+
meta.setAttribute(
16+
"content",
17+
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
18+
);
19+
document.head.appendChild(meta);
20+
});

readium/navigator/src/main/assets/readium/scripts/readium-reflowable.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

readium/streamer/src/main/java/org/readium/r2/streamer/fetcher/HtmlInjector.kt

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,6 @@ internal class HtmlInjector(
7070

7171
val endIncludes = mutableListOf<String>()
7272
val beginIncludes = mutableListOf<String>()
73-
beginIncludes.add("<meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\" />")
74-
7573
beginIncludes.add(getHtmlLink("/assets/readium-css/${layout.readiumCSSPath}ReadiumCSS-before.css"))
7674
endIncludes.add(getHtmlLink("/assets/readium-css/${layout.readiumCSSPath}ReadiumCSS-after.css"))
7775
endIncludes.add(getHtmlScript("/assets/scripts/readium-reflowable.js"))

readium/streamer/src/test/java/org/readium/r2/streamer/fetcher/HtmlInjectorTest.kt

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ class HtmlInjectorTest {
1515
<?xml version="1.0" encoding="utf-8"?>
1616
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
1717
<html xmlns="http://www.w3.org/1999/xhtml">
18-
<head><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
18+
<head><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
1919
2020
<title>Publication</title>
2121
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -48,7 +48,7 @@ class HtmlInjectorTest {
4848
<?xml version="1.0" encoding="utf-8"?>
4949
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
5050
<html xmlns="http://www.w3.org/1999/xhtml">
51-
<head xmlns:xlink="http://www.w3.org/1999/xlink"><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
51+
<head xmlns:xlink="http://www.w3.org/1999/xlink"><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
5252
5353
<title>Publication</title>
5454
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -79,7 +79,7 @@ class HtmlInjectorTest {
7979
assertEquals(
8080
"""
8181
<?xml version="1.0" encoding="utf-8"?>
82-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head xmlns:xlink="http://www.w3.org/1999/xlink"><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
82+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head xmlns:xlink="http://www.w3.org/1999/xlink"><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
8383
<title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
8484
<script type="text/javascript" src="/assets/scripts/readium-reflowable.js"></script>
8585
<style>@import url('https://fonts.googleapis.com/css?family=PT+Serif|Roboto|Source+Sans+Pro|Vollkorn');</style>
@@ -100,7 +100,7 @@ class HtmlInjectorTest {
100100
<?xml version="1.0" encoding="utf-8"?>
101101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><HEAD
102102
xmlns:xlink="http://www.w3.org/1999/xlink"
103-
><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
103+
><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
104104
<title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
105105
<script type="text/javascript" src="/assets/scripts/readium-reflowable.js"></script>
106106
<style>@import url('https://fonts.googleapis.com/css?family=PT+Serif|Roboto|Source+Sans+Pro|Vollkorn');</style>

0 commit comments

Comments
 (0)