My application generates HTML email templates. They are between 600px and 650px wide usually, but sometimes they go up to 900px. The templates are nested pretty deep (lots of table elements for email clients), and sadly all the widths/heights are hard-coded in px, not relative dimensions. This has been ok until now, because my users view them in a browser. But now I am building a mobile app.
I am trying to display these templates in a webview inside various mobile clients (iPhone, Android, iPad, etc). Is there a way to 'scale' or fit these templates so they stretch to fill up the entire width of the window?
I tried tweaking the meta tag;
<meta name="viewport" content="width=device-width, initial-scale=1.0>
Unfortunately I don't know the width of the template beforehand so I have to either set the meta tag too wide or too small, and then templates either have white borders or end up overlapping the window. What else can I try?
I ended up using CSS3's
transform: scale(ratio);
position: absolute;
top: 5px; left: 5px;
after dynamically calculating the scale ratio to take into account the 5px margin. Turns out
minimum-scale=0.1
was necessary for an older Android phone to display the re-sized view correctly.
Related
I'm building a React app that can be injected in a page as a normal html element. I ran into the issue of webpages that don't use the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">. I am required to make my injected element scale properly on mobile devices, even though the page it is injected into doesn't.
I've tried adding classes that represent the current viewport width and using them similarly to media queries, however I can not deal with the font sizes not scaling properly, since using rems would use the page font size which itself doesn't scale.
I even resorted to using transform: scale((window.innerWidth / window.screen.width).toFixed(3)) but that is hardly controllable.
Any ideas on how can I achieve this?
I implemented a "mini epub reader" in my app. In order to determine how many pages are in a chapter (based on pagination for the underlying UIWebView frame width), I get the scrollWidth via
document.documentElement.scrollWidth
and using the CSS style
-webkit-column-width: (UIWebView's frame width).
and divide it by the UIWebView's frame width. So basically my "get next/previous page" uses the following Javascript
window.scrollTo()
Works fine except when the text fills up basically one viewable page exactly. In that case, it seems the document.documentElement.scrollWidth is one page (UIWebView width) larger than necessary, and what I see are blank pages at the end of a chapter.
Any ideas how to avoid this, or somehow detect "blank" content in the viewable area?
BTW, this is when I'm handling ePub files with Japanese tategaki, so in reality I'm using
document.documentElement.scrollHeight
but the idea should be the same.
Turns out, it was the margins causing the blanks. This CSS did the trick
margin-left: 0%; margin-right: 0%; margin-top: 0%; margin-bottom: 0%;
I have a website which I want to follow the resizing of the browser window so that it always fits.
I tried using css transform scale property with a ratio given by current window width divided by full-screen window width.
It does re-scale but there must be something wrong with it because it leaves white blocks to the left and the right of the content (so it shrinks the site too much and then centers in in the window)
Here is the javascript code:
$(window).resize(function(){
var ratio = $(window).width()/1340;
$('body').css('transform','scale('+(ratio)+')');
$('body').css('-ms-transform','scale('+(ratio)+')');
$('body').css('-moz-transform','scale('+(ratio)+')');
$('body').css('-webkit-transform','scale('+(ratio)+')');
});
Is there a better way to make the page fit the window (or make the scaling scale properly)?
To make your website mobile friendly, you should really think about making it responsive using media queries or using some front-end framework like Bootstrap, Foundation etc.
Or if you just want to scale your website so it should not horizontally scale and fit to user's screen (No matter how small your UI component become) You can do that by adding following meta tag in your head section.
<meta name="viewport" content="width=device-width, initial-scale=1">
It'll force browser to keep the website scale enough to fit the mobile screen width.
Hope It'll help.
What you're wanting to do is build the website using Responsive and Adaptive methods. See if this link helps! http://www.imediaconnection.com/content/33435.asp#singleview
you can use this, put the whole content inside it
#wrapper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}
Use
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in Html head section and
#media only screen and
(min-device-width : screen px) and
(max-device-width : screen px) {
#id{style}
}
in CSS.
I'm trying to produce a mobile version of my website, but have encountered one problem:
The the whole website fits properly on the computer (with an example browser width of 480px) but leaves space on the right when viewing on my mobile phone (regardless of the browser I used). So the whole site looks good, but you can scroll "out of the website".
I first tried to disable horizontally scrolling, so I included this line:
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
To disable the (still scrollable!) space on the right I added this to my "mobile.css":
It worked on the computer, but not on my mobile.
body{
width: 100%;
overflow-x: hidden;
}
My website is avaiable here: my mobile website
My mobile.css file is located here: my "mobile.css"
I have tested the website on following mobile browsers:
Google Chrome
Dolphin
The default android browser
I originally wanted to avoid Javascript, but if there is a javascript solution, please don't hesitate to post it!
If you want your layout to be mobile friendly, it's best to be thinking about this right from the beginning. So, for example, if you are going to set fixed widths on elements (which I don't recommend), such as—
#back-menu-left {with: 500px;}
you need to ask yourself what will happen to this on a small screen. So, either don't set that width, or immediately write an #media rule to override it on smaller screens.
(I didn't check through the rest of your code, just stopping when I found one oversized element. Best to check and see if there are any other overwide elements like that.)
I'm currently writing a Javascript plugin that needs to display an accordion notification (the sort that slide down from the top of the screen).
It works beautifully on desktop browsers simply with this css on the modals and accordions.
position: fixed;
top: 0;
left: 0;
width: 100%;
Unfortunately, that doesn't work so well on mobile browsers like Android and iOS. The default behaviour on my Galaxy S2 with Android 4 ICS is that the fixed position elements position in the correct place, and size to 100% screen width. Unfortunately, as soon as you pinch zoom and change the scale of the page, the browser doesn't seem to recalculate the 100% width and the element goes off-screen. Panning the content doesn't pan the fixed elements.
I found iScroll, a Javascript plugin which looks to do exactly what I want - except it needs the source of the main content of the page to be changed in order to work. My plug in has to work on any site and so unfortunately this isn't an option.
Does anyone have any ideas?
Try adding
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
to your head which should stop the mobile browser from resizing the content.