Simulator not simulating very well?


#1

Is this a common problem? I find that the layout of UIs looks pretty different in the simulator compared to a real device (I have an iPhone 6+).
Any tips on how to get a more realistic rendering? Particularly for handsets that I don’t have!
If this is a surprise to anyone here, I can supply screenshots…


#2

Yes please share screenshots of an app running on a simulator and device of the same type. It’ll probably also be useful to see the code responsible for rendering the UI.


#3

Right… It’s a shame that it’s so hard to upload to Playground! :wink:
I may be some time…


#4


#5

Are you sure these are the same devices? The simulator seems to have a higher resolution. And where’s the code? :slight_smile:


#6

Well, the device was a screenshot of the device and the simulator was a screenshot of the simulator - I suspect the resolution of my screen was insufficient to make them the same in terms of uploaded image resolution.

Code - well, that’ll take a bit longer, please bear with me! :wink:


#7

Curious: did you use CMD-s/CTRL-s to create the Simulator screenshot? And please include the specs of these devices (iOS version and hardware).


#8

Actually, the markup itself is straightforward:

<Page
    class="page"
    xmlns="http://schemas.nativescript.org/tns.xsd"
    loaded="loaded"
    navigatedTo="pageNavigatedTo">

    <ActionBar class="{{ loggedin ? 'action-bar loggedin' : 'action-bar notloggedin' }}">
        <Label class="action-bar-title" text="{{ dmid }}"></Label>
    </ActionBar>
    <StackLayout orientation="vertical" horizontalAlignment="center">   
        <StackLayout class="destappsmarter" orientation="vertical" horizontalAlignment="center">   
            <StackLayout orientation="horizontal" class="destrow" >
                <TextField class="dest" id="dest" text="{{ dest }}" tap="desttap" horizontalAlignment="center" />
                <Image class="cleardest" text="X" tap="key" src="res://clear" stretch="aspectFit"/>
            </StackLayout>
            <Label id="appsmarter" class="{{ appsmartermodifier }}" text="{{ appsmartertext }}" horizontalAlignment="center"/>
        </StackLayout>

        <GridLayout class="keypad" columns="90,90,90" rows="*,*,*,*,*" horizontalAlignment="center" >
            <Button class="dig" text="1" row="0" col="0" tap="key"/>
            <Button class="dig" text="2" row="0" col="1" tap="key"/>
            <Button class="dig" text="3" row="0" col="2" tap="key"/>
            <Button class="dig" text="4" row="1" col="0" tap="key"/>
            <Button class="dig" text="5" row="1" col="1" tap="key"/>
            <Button class="dig" text="6" row="1" col="2" tap="key"/>
            <Button class="dig" text="7" row="2" col="0" tap="key"/>
            <Button class="dig" text="8" row="2" col="1" tap="key"/>
            <Button class="dig" text="9" row="2" col="2" tap="key"/>
            <Button class="dig" text="+" row="3" col="0" tap="key"/>
            <Button class="dig" text="0" row="3" col="1" tap="key"/>
            <Button class="dig" text="#" row="3" col="2" tap="key"/>
            <Image class="del" id="appsmarterbutton" text="?" tap="key" row="4" col="0" src="res://appsmarter" stretch="aspectFit" horizontalAlignment="center" visibility="{{ asvisible }}"/>
            <Image class="dig green" src="res://phoneonly" text="C" row="4" col="1" tap="key" stretch="aspectFit"/>
            <Image class="del" id="delbutton" text="D" tap="key" row="4" col="2" src="res://del" stretch="aspectFit" horizontalAlignment="center" visibility="{{ delvisible }}"/>
        </GridLayout>
    </StackLayout>
</Page>```

The stylesheet (some of this is not in use):

@import url("~/platform.css");

.keypad {
height: 1200px;
}

.dig{
color:black;
font-size: 30px;
float: left;
background-color: #ccc;
text-align:center;
width: 200px;
height: 200px;
margin: 10;
border-radius: 100%;
font-weight: 700;
cursor: pointer;
}
Button {
border-width: 0;
}
Button:highlighted {
background-color: #666;
color: white;
}
.green{
background-color: green;
color: white;
}

TextField {
margin: 10;
padding: 5;
font-size: x-large;
}

.destappsmarter {
padding-bottom: 20;

}
.destrow {
width: 90%;
}

.dest {
padding: 10;
font-size: 30px;
border: 0px;
font-weight: 500;
width: 80%;
text-align: center;
}

.cleardest {
float: left;
width: 150px;
height: 150px;
cursor: pointer;
margin: 10;
padding: 10;
}

.phoneicon {
width: 80px;
height: 80px;
}

.del {
width: 100px;
height: 100px;
cursor: pointer;
margin: 10px 0px;
padding-top: 4px;
}

.appsmarter {
color: gray;
text-align: center;
}

.action-bar.notloggedin {
background-color: red;
}

.action-bar.loggedin {
background-color: green;
}


#9

Shift-Cmd-4 for the screenshot of Simulator

The device is iPhone 6+ on 11.3.1

The Simulator is iPhone 6 Plus on 11.2


#10

BTW, the css was a result of a bit of playing around and experimentation. Hence the mix of pixels and %. Still not sure how best to do this, but I’d rather hope that that’s not relevant to the differences between simulator and device.

I’m picking up here that this is not normal, which fills me with hope that they should look the same!


#11

Yeah, I’m not used to different rendering on simulator and device. It’s usually spot on.

Btw, for simulator screenshots use CMD-s. That way your Mac screen resolution doesn’t matter.

Also, I never use % and hardly use px. Just specify those CSS values as width: 10 because that uses device independent pixels. I use px only when I want hairlines like border-width: 1px.


#12

I think if I moved over to density independent pixels that might help me