yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-03 14:59:18 +02:00
Code Issues Releases Wiki Activity

fix width and height of iframes for mobile sized browsers

Browse source
This commit is contained in:
Fred Chasen 2014-01-26 17:31:45 -08:00
parent a2180ce924
commit 96ada6783b
4 changed files with 71 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

76
demo/css/main.css
View file

@ -103,9 +103,10 @@ body {
max-width: 1250px;
/* z-index: 2;
position: absolute; */
overflow: hidden;
}
#viewer iframe {
#viewer #epubjs-iframe {
border: none;
}
@ -659,26 +660,56 @@ input:-moz-placeholder {
}
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* you can be more comfortable with increased icons size */
font-size: 112%;
}
/* For iPad portrait layouts only */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
#viewer #epubjs-iframe {
width: 460px;
height: 740px;
}
}
/*For iPad landscape layouts only */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
#viewer #epubjs-iframe {
width: 460px;
height: 415px;
}
}
/* For iPhone portrait layouts only */
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
#viewer #epubjs-iframe {
width: 256px;
height: 368px;
}
}
/* For iPhone landscape layouts only */
@media only screen and (max-device-width: 480px) and (orientation: landscape) {
#viewer #epubjs-iframe {
width: 256px;
height: 124px;
}
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* you can be more comfortable with increased icons size */
font-size: 112%;
}
.icon-search:before { content: '\e807'; } /* '' */
@ -702,4 +733,5 @@ input:-moz-placeholder {
.icon-list-numbered:before { content: '\e801'; } /* '' */
.icon-columns:before { content: '\e810'; } /* '' */
.icon-list:before { content: '\e800'; } /* '' */
.icon-resize-small:before { content: '\e808'; } /* '' */
.icon-resize-small:before { content: '\e808'; } /* '' */

2
demo/dev.html
View file

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="../demo/css/normalize.css">

29
reader/controllers/controls_controller.js
View file

@ -41,20 +41,21 @@ EPUBJS.reader.ControlsController = function(book) {
$fullscreen.on("click", function() {
screenfull.toggle($('#container')[0]);
});
document.addEventListener(screenfull.raw.fullscreenchange, function() {
fullscreen = screenfull.isFullscreen;
if(fullscreen) {
$fullscreen
.addClass("icon-resize-small")
.removeClass("icon-resize-full");
} else {
$fullscreen
.addClass("icon-resize-full")
.removeClass("icon-resize-small");
}
});
if(screenfull) {
document.addEventListener(screenfull.raw.fullscreenchange, function() {
fullscreen = screenfull.isFullscreen;
if(fullscreen) {
$fullscreen
.addClass("icon-resize-small")
.removeClass("icon-resize-full");
} else {
$fullscreen
.addClass("icon-resize-full")
.removeClass("icon-resize-small");
}
});
}
$settings.on("click", function() {
reader.SettingsController.show();

2
reader/reader.js
View file

@ -57,7 +57,7 @@ EPUBJS.Reader = function(path, _options) {
reload: this.settings.reload,
contained: this.settings.contained,
bookKey: this.settings.bookKey,
styles: this.settings.styles
styles: this.settings.styles,
});
if(this.settings.previousLocationCfi) {