I am currently using Apaxy (an Apache directory browser). The theme looks beautiful on PC, but on mobile, it's a little too zoomed out. Is there any way I could force-zoom in if a mobile device is detected?
For a little more detail, this is what I mean:
What actually happens: http://imgur.com/xGNjdk2
What I would like to happen: http://imgur.com/8yTJkOJ
I can't seem to figure out a way to do this using viewport, but maybe I'm just not thinking.
You can use the viewport meta tag to set an initial-scale: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
However, setting an initial scale will load the page "off-center" since it'll start off zoomed into the top left corner. I think what you really want is to set width=device-width in the viewport meta so that the page lays out into a size appropriate for the screen size.
e.g. <meta name="viewport" content="width=device-width">
Related
I'm new to the responsive designs and I've run into an odd problem with scrolling. It seems that every time I scroll, the viewport seems to keep re-sizing. I've tried using the <meta name="viewport" content="width=device-width"> with initial scale set to 1, but no use. I'm also using media queries.
I also did a test where I turned everything off and used jQuery to detect a re-size event using an alert. Zoomed in with pinch zoom and tried scrolling and got a viewport re-size alert. I also noticed that after I scroll, the scroll bar will flash twice in indication of a sizing event going on.
It seems as if I'm missing something in my setup.
Any ideas?
The viewport is indeed re-sizing because the browser bar hides or appears when you scroll.
If you are reliant on a "real" resize event you could check whether the width has changed.
I'm using Anddown to convert some markdown text to html and I want to display the html in a webview. The webview is part of a fragment that takes up around half the screen on a tablet in landscape.
I want the html to appear at 'normal' scale, as in I never want it zoomed out so you can see the whole page. Most of the time this is fine since text in blocks wraps when it reaches the end of the view. But some of the markdown elements result in an html element which stretches the view horizontally, so I've got something that looks like this:
----
----
----
--------------
----
(imagine the dashes are text, the short lines are wrapping correctly to the fragment width)
When I load that to the webview, the page is zoomed out fully so that that long horizontal line fits the width of my view. I don't want this, I want the webview to always be zoomed in. The weird thing is that sometimes when I load the html to the webview, it will automatically zoom in to what I want (but with some horizontal overflow). This doesn't happen every time and when it does, I can see the zoomed out version for a split second before it resizes.
So my question is, how do I get it to default to 'zoomed in' always? I don't care if it means there's some horizontal overflow, I just want the text to be 100% in scale (if that even makes sense).
For normal scale you should use this viewport tag (on your html's header):
<meta name="viewport" content="initial-scale=1, maximum-scale=1,minimum-scale=1">
Now, if you want different scale you can change these settings (for example use a scale of 2)
Hope that answers your qauestion
If you're using text.
Have you tried using
word-wrap:break-word;
So the text won't be outside it's parent
I've been banging my head against the wall for the whole day now, and i need some help :(
The problem is, that i have a WebApp that was designed for 640x960.
We didn't have time to write css for each screen size, so i've used initial-scale, maximum-scale, minimum-scale in the viewport meta tag to scale the app to different screen sizes.
The problem is, that in Android 4.4, no matter what i do, it always scales the app up, but never down!
I mean if i use a value of 0.7, the app is scaled up. If i use a value of 1.3, it is scaled up again :/
I've tried to change the targetSdkVersion to different versions to get the old behavior, but with no luck.
Can someone help me?
UPDATE:
So i ended up using style="zoom: <value>%" on the body tag. I calculate the percentage based on the difference between the current device screen size and the resolution my app was designed for. Now everything fits.
A viewport of
<meta name="viewport" content="width=640, initial-scale=1">
should make your fixed layout always fit (see MDN for more on the viewport meta tag).
You could be bumping in some of the following:
the contents can't be scaled down more than 'overview scale' (that is, such that your content is narrower than the screen). This is by design - making it smaller only results in rendering white to the sides so why bother. If you want this behaviour you'd need to add padding to the content,
you've specified the layout height of the WebView to be WRAP_CONTENT - this makes the WebView ignore the viewport meta tag, don't do that - set it to MATCH_PARENT or a fixed size,
you're using certain WebSettings:
setUseWideViewport (which overrides the viewport meta tag) or
setInitialScale (which can alter the size of the viewport).
The best way to check if it's the content's fault or the WebView's fault is to see if the page works in Chrome on Android:
if it works in Chrome on Android but not in the WebView then set targetSdkVersion to 19 and try disabling WebSettings, changing your layout to fixed size, etc.. to see what's causing the problem. Maybe start from the other end - by making a super trivial WebView app that just loads the page - confirm that works and then slowly introduce changes to see which one causes the problem,
if it doesn't work in Chrome on Android then problem is the difference in viewport meta tag support between pre-KK WebView and Chrome on Android - this means you'll have to fix your content,
If you're still stuck post a zip that contains sources with a repro (doesn't have to be the full app, just the minimum to demonstrate the problem) and I can try and help you more from there.
Just had a run through of this after not quite being sure of the answer myself.
http://www.gauntface.co.uk/blog/2013/11/29/desktop-site-and-the-viewport/
You want a viewport without an initial-scale if you only want the webpage to fit the WebView's width.
Things that will affect the WebView:
Ensure you have setUseWideViewport() enabled so the page can be larger than the devices width: http://developer.android.com/reference/android/webkit/WebSettings.html#setUseWideViewPort(boolean)
Ensure you targetSDKVersion=19 to ensure you aren't getting any compatibilities for the old webview
If you want to prevent the user from zooming in or out, use user-scalable=no in the viewport rather than set a min and max.
I'm not a web developer. I'm budding games developer.
I'm making this website to show off my portfolio.
I think its looking good in all the pc browsers I tried.
It should look like this
But in chrome and firefox on android, the block of text in the top right is rendered in a massive size font which makes that div huge and pushes everything down.
Now, Originally there was the mainpage html file with the sitemap + that paragraph, and the individual bits about my projects, for instance 'artefact', were seperate pages loaded into an iframe.
I noticed that, the lower paragraph in the iframe was fine even though the div is the same class as the problematic one above.
Heres what Ive tried so far..
I made that p a new class and defined its text size explicitly
I put the entire website in another iframe. strangely didnt make any difference
I put that pargraph in a li in a ul
I put all the text in that paragraph in a span
I changed the text from a p to a h7
The android browser is still picking up on it and making the text huge, and not the one below..
In firefox it seems this is being caused by 'font inflation' and I can get around it by changing firefoxes settings. But why is it only inflating one paragraph and ignoring the other?
Please note. I have done everything in this site in pixels and not % or em.
If I can just get android to not blow up that one paragraph it'll be fine.
I have actually discovered a good solution to this..
Add this line to your css..
html * {max-height:1000000px;}
Fixes it on chrome and firefox on android anyway.
You can read more about it here.
Discovered it on this stackoverflow question
We have a think called Font Boosting, it is designed to make text that is hard to read on a mobile device more readable. You can't really get around it other than to create a mobile optimised site by including the mobile viewport meta tag <meta name="viewport" content="width=device-width"> this will turn off the font-boosting, but it will mean the width of the screen is measured in CSS pixels at about 480px on a Nexus4.
The site should have a fluid-layout, adjusting to the width of the device, in both portrait and landscape orientations. Here's my meta viewport tag:
<meta name="viewport" id="viewportid" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
The problem is when the user zooms, the content flows to adjust to the visual viewport. I want to ensure the content remains static. That is, the layout viewport is unaffected by the visual viewport.
How can I prevent the content from flowing when zooming?
Thank you very much for any help. This has been aggravating as hell.
Here is an example of the page zoomed out (scale=1) (Android 2.1 Emulator SDK)
Here is an example of the same page, zoomed in (Android 2.1 Emulator SDK)
I tried fiddling around with photoswipe and iScroll4, but I want the user to pinch-zoom and iScroll4 doesn't seem to work with Android Ver <=1.6, according to testing I did on the Android Emulator SDK. I thought I could try something better suited for my needs.
So, AFAIK, and I could be very wrong, there's no way to track the zoom level, per the meta viewport tag, on Android devices. jQuery Mobile doesn't have such a feature; maybe Sencha, Phonegap, or some Android Java libraries facilitate this and I'd be more than happy to be corrected!
Now then, it's not the best method, but I figured out a way that seems to be accurate within 1 or 2 pixels, at worst. I wasn't sure if Android changes it's zoom level innately on an orientation change event, but I gave my method a shot and it worked.
Here's the code:
$(document).ready(function(){
var ViewportWidth = document.documentElement.clientWidth;
var LayoutWidth = document.documentElement.clientWidth;
$("#Index").css("width", LayoutWidth);
var SetLayoutWidth = function() {
LayoutWidth = Math.round((1/(ViewportWidth/LayoutWidth)) * document.documentElement.clientWidth);
$("#Index").css("width", LayoutWidth);
}
$(window).resize(function() {
ViewportWidth = document.documentElement.clientWidth;
});
$(window).bind("orientationchange", function(event) {
if (navigator.userAgent.match(/android/i))
if (Math.abs(window.orientation) == 90 && event.orientation == "landscape")
SetLayoutWidth();
else if (!window.orientation && event.orientation == "portrait")
SetLayoutWidth();
});
});
When the user zooms, the visual viewport width changes, whose value is stored. The ratio of visual viewport to layout viewport width is, say, 0.8, after the user zooms. Now, when the user changes the device's orientation, the ratio is divided by 1. To realize what the layout viewport width should be at full screen, in this example, I need to take 125% of the visual viewport width.
The one problem I know that may creep up is the resize event might fire before the orientation change event. I haven't seen this occur in testing, but I'll need to determine how to tackle that, if and when it does occur.
Thank you.