I developed an app in phonegap build and going to publish as i see it work nicely in iphone resolution. When the time i try with samsung note, i found out the screen resolution not so good as the application look small and minimized everything. How can i scale the application and fit to the screen as how it fit to iphone screen? Thanks for reply.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1.0, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
If you want resolve this without using native code, e.g. if you're using Phonegap build service, you can set target-densitydpi=160 or some other value. This will will set the dpi (dots per inch) for the device. This way the content will be sized similarly across devices. Standard values:
Low res: target-densitydpi=120
Medium res: target-densitydpi=160
High res: target-densitydpi=240
As I understand it, you can use any value between 70-400.
Word of caution: I've just made use of this on a Phonegap app of my own, and am experiencing troubles with un-clickable areas, which I'm currently researching. My app is a little complex and heavy on the DOM, so I'm not sure if this will be a problem for you. Just make sure to test all click/tap events extensively after implementing this.
$(document).ready(function() {
$('meta[name=viewport]').attr('content','width=1024, user-scalable=no');
});
Seem to work for disabling the user scaling after the correct scaling have been applied
Related
I have a web app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.
I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.
Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?
HTML::
meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"
CSS::
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
I am working on Ionic v1 application. It looks good on Android, iOS devices and most of the browsers, including MS edge. I needed to add Object.assign polyfill for it to start on IE11 but it's starting now.
But the website is scaled, big, everything is enormous, ever scrollbars are enormous. On my laptop is 15" Windows 10 Home edition it looks like this:
I've checked:
Browser zoom is 100%
HTML meta tags are as following:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
altering them doesn't change anything.
Some dimensions are in rem, but hanging <html> font-size from 100% to 62% or 16px doesn't considerably influence anything.
Interestingly for some reason window.devicePixelRatio is 4 and something on Asus PC.
I've tried adding full core-js polyfill library, but that didn't change anything.
N.B.: It turned out that Ionic that I've created this website with doesn't support IE. Nevertheless, in the past I haven't seen such issues when something was not supported, e.g. with native scroll exploding to such dimensions.
Question: What can cause this effect?
There is an HTML5 game was made using GameMaker Studio. When I open it on mobiles (iOS and Android), it uses a wrong resolution.
An example. A game uses 960*640:
But on the phone I see this:
Also there you can see browser's resolution which was returned by the engine. As you can see, it's x3 times lower than actual resolution (640*360 instead of 1920*1080). Of course my first mind was that it's an engine's bug. But I checked it using HTML/JS and there were same values. One person on StackOverflow mentioned viewport meta and seems like it may help.
I looked into index.html generated by GMS, and there was a line
<meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
I have no experience with HTML/etc, so I just tried some values:
<meta name ="viewport" content="width=device-width" />
<meta name ="viewport" content="width=device-width, height=device-height" />
<meta name ="viewport" content="width=960, height=640" />
<meta name ="viewport" content="width=640, height=960" />
and some other.
But it is not solved the problem. Although sometime the result was better.
Is there any magic to make the game work as well?
P.S. If it would help:
You can see index.html there
Compiled project there (as I understand, it won't work from local disk)
P.P.S. I use Chrome and Samsung Internet on Android and Safari + Chrome on iOS.
P.P.P.S. I know about window.devicePixelRatio, but I don't know how it may be used there.
upd: Even with just content="width=device-width" it shows the whole picture, but the picture has low vertical resolution. For example, 960*420 (on 1920*1080 display) in landscape mode. Of course then the game looks terrible. If I flip device to portrait orientation then the browser returns 960*1494. The image looks perfect, but it too small (takes only about 1/3 of the display). So I need the vertical resolution of the browser was bigger (or equal) than the height of the game canvas.
upd2: Was found solution
<script type="text/javascript">
var canvas = document.getElementById("canvas");
function canvas_resize(){
canvas.width = 960 * window.devicePixelRatio;
canvas.height = 640 * window.devicePixelRatio;
}
window.addEventListener("orientationchange", canvas_resize);
document.addEventListener("DOMContentLoaded", function () {
canvas_resize();
})
</script>
but there are two problems:
It works on Android, but it doesn't work on iOS (iOS shows the image with very low resolution). What solution would work on iOS?
Browser should to request for desktop version of the site ("Request desktop site" option). When browser requests a mobile version of the site, it also always uses low resolution. Is there way to avoid it?
I've built a web page which displays a grid. On the regular screen (laptop / desktop), the browser is at 100% zoom level and the UI looks fine.
However, when I connect my laptop to a projector, the browser automatically sets the zoom % to 125% and everything is bigger and scroll bars appear everywhere.
I don't understand what this behavior is based off or where it is coming from. Is it due to the resolution change?
Is there a way for me to make sure my UI does not get zoomed when I connect to a large screen?
Thanks
You should be able to avoid scaling on certain screens by setting the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
My app only works in landscape mode due to some layout restrictions. Since IOS7 update, whenever I take a photo on my phonegap app, the right hand side of the screen disappears (as if the orientation changes to portrait) and I'm left with a black bar down the right hand side.
If I rotate the ipad 180˚ it resets itself and displays properly again but my client will not accept this as a solution!
Any ideas why it is happening? or how I could programatically change the orientation?
I had a similar problem with the black bar on right side. My problem occurred when the orientation changed, not from the camera. For me the solution was to change the viewport meta tag in index.html to:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
For anyone doing any digging, I found that the webView was resizing correctly, and the black bar was from the webView not re-rendering its content at the correct size.