Hi all,
Newbie here, recently starting using ionic framework for a project.
My app is basically a nav view with multiple views inside it (100% height and width)
My viewport meta looks like this
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width width=device-width">
I have the scale set to true/false, doesn’t matter.
<preference name="EnableViewportScale" value="true"/>
The problem is that if i run app on a Nexus 7 2013 tablet (or similar emulator) ( 1200x1920 resolution) in the chrome://inspect my view has a width of 600x880 something. So not the real sizes.
Somehow ionic s reporting different dimensions than the device actual dimensions.
And this happens for ionic project. For sure don’t have strange CSS rules for body, ion-view etc.
If i inject $window in a controller
self.deviceWidth = $window.innerWidth; self.deviceHeight = $window.innerHeight;
the dimensions are 600x887.
Tried to mess platform classes, no result:
function addPlatformBodyTag(indexPath, platform) { // add the platform class to the body tag try { var platformClass = 'platform111-' + platform; var cordovaClass = 'platform1111-cordova platform1-webview1'; var html = fs.readFileSync(indexPath, 'utf8');
The same problem if i inspect in Safari for iOS device?
Am I missing something about ionic ? Or really have a problem in my app ?
[Edit] If ionic works like this, how am I supposed to use CSS media queries since the screen values aren’t the actual values. Can i find somewhere a good example ? Suppose it’s not really ok to make assumptions of scaling.