yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-04 15:09:16 +02:00
Code Issues Releases Wiki Activity

Add viewport scaling

Browse source
This commit is contained in:
Fred Chasen 2016-08-12 17:10:43 +02:00
parent 1462d473df
commit a443bf00ce
5 changed files with 87 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/contents.js
View file

@ -147,10 +147,10 @@ Contents.prototype.css = function(property, value) {
return this.window.getComputedStyle(content)[property];
};
Contents.prototype.viewport = function() {
var width, height;
var $doc = this.document.documentElement;
var $viewport = $doc.querySelector("[name=viewport");
Contents.prototype.viewport = function(options) {
var width, height, scale, scalable;
var $viewport = this.document.querySelector("meta[name='viewport']");
var newContent = '';
/**
* check for the viewport size
@ -165,8 +165,35 @@ Contents.prototype.viewport = function() {
if(contents[1]){
height = contents[1].replace("height=", '').trim();
}
if(contents[2]){
scale = contents[2].replace("initial-scale=", '').trim();
}
if(contents[3]){
scalable = contents[3].replace("user-scalable=", '').trim();
}
}
if (options) {
newContent += "width=" + (options.width || width);
newContent += ", height=" + (options.height || height);
if (options.scale || scale) {
newContent += ", initial-scale=" + (options.scale || scale);
}
if (options.scalable || scalable) {
newContent += ", user-scalable=" + (options.scalable || scalable);
}
if (!$viewport) {
$viewport = this.document.createElement("meta");
$viewport.setAttribute("name", "viewport");
this.document.querySelector('head').appendChild($viewport);
}
$viewport.setAttribute("content", newContent);
}
return {
width: parseInt(width),
height: parseInt(height)
@ -549,15 +576,10 @@ Contents.prototype.scale = function(scale){
this.css("transformOrigin", "top left");
this.css("transform", "scale(" + scale + ")");
this.documentElement.style.display = "flex";
this.documentElement.style.flexDirection = "column";
this.documentElement.style.justifyContent = "center";
};
Contents.prototype.fit = function(width, height){
var viewport = this.viewport();
var widthScale = width / viewport.width;
var heightScale = height / viewport.height;
var scale = widthScale < heightScale ? widthScale : heightScale;
@ -568,11 +590,15 @@ Contents.prototype.fit = function(width, height){
this.height(height);
this.overflow("hidden");
this.scale(scale, 0, offsetY);
// Deal with Mobile trying to scale to viewport
this.viewport({ scale: 1.0 });
// Scale to the correct size
this.scale(scale);
this.css("backgroundColor", "transparent");
// this.css("marginTop", offsetY + "px");
this.css("marginTop", offsetY + "px");
};