local preview and correspond to device issue

How-to Discussions
1

Hi.
I was making ux files with local preview.
there were devices.json file when I made project. so I set galaxy S6 edge to my basis device and made bunch of components
and its looks like this.

[Album] Imgur

but when I build with my actual galaxy s6 edge device, this were looks like this.

[Album] Imgur

and I checked with my other actual android devices (galaxy S7, S5, LG V10) and galaxys are get same screen with s6 edge. LG V10 has soft key issue.

http://imgur.com/a/XIelp (just for sure, its V10s screen shot)

and checked local preview on other laptop.
I built local preview in other guys different laptop and got different preview screen. we are not using same kind of laptop.

this sounds like mumbling but I spent many days to make those and its all gotta problem now.
do you guys has any guide for this problems?

summary.
local preview works different depends on PC and mobile devices.

2

Hi.
The local preview is not trying to emulate a phone perfectly so there could always be some differences, but this seems like an extreme case.

If you can share some UX markup that reproduces this issue we’ll take a look.

3

this would be shortest to shoot trouble in my codes.
others are too long.

<Page ux:Class="NovelCardList">
	<JavaScript File="DummyData/NovelCardList.js"/>
	<ScrollView>
		<StackPanel ItemSpacing="15" Margin="10">
			<Each Items="{cardListView}">
				<NovelCardItem />
			</Each>
		</StackPanel>
	</ScrollView>
</Page>

and

<DockPanel ux:Class="NovelCardItem">
	<DropShadow Color="SecondaryColor" Distance="2"/>

	<!-- ImageArea -->
	<Panel Dock="Left">
		<Image Url="{item.coverUrl}" Width="131" Height="171" StretchMode="Fill"/>
	</Panel>
	<Panel Color="White" Padding="10" Dock="Fill">

		<!-- Top on card -->
		<StackPanel>
			<Text Font="BoldFont" Color="PrimaryText" FontSize="18" Value="{item.title}" TextWrapping="Wrap" />
			<PrimaryText Value="{item.author}" FontSize="13" />
			<StackPanel Orientation="Horizontal" Margin="0,5">
				<TagButton Value="{item.thema}" StrokeColor="ColorRomeFan" FontSize="11" />
				<TagButton Value="{item.tagList}" StrokeColor="SecondaryText" FontSize="11" />
			</StackPanel>
		</StackPanel>

		<!-- Bottoms -->
		<StackPanel Alignment="Bottom">
				<StackPanel Orientation="Horizontal" ContentAlignment="VerticalCenter">
				<Image File="../Assets/star.png" Color="ThirdlyColor" Width="18" Height="18"  />
				<Text Value="1.6M" Color="ThirdlyColor" Font="RegularFont" FontSize="12" Margin="0,0,15,0"/>

				<Image File="../Assets/star.png" Color="ThirdlyColor" Width="18" Height="18"  />
				<Text Value="63K" Color="ThirdlyColor" Font="RegularFont" FontSize="12" Margin="0,0,15,0"/>

				<Image File="../Assets/star.png" Color="ThirdlyColor" Width="18" Height="18"  />
				<Text Value="30K" Color="ThirdlyColor" Font="RegularFont" FontSize="12" Margin="0,0,15,0"/>

				<Image File="../Assets/star.png" Color="ThirdlyColor" Width="18" Height="18"  />
				<Text Value="{item.avgRate}" Color="ThirdlyColor" Font="RegularFont" FontSize="12" />
			</StackPanel>

			<!-- Star rating part -->
			<StackPanel Orientation="Horizontal">
				<Text Value="내 평가: " Font="RegularFont" Color="PrimaryText" FontSize="12" Alignment="VerticalCenter" />
				<SlidierRating Stars="5" Rating="{item.myRate}" />
			</StackPanel>
		</StackPanel>
	</Panel>
</DockPanel>

[Album] Imgur

this is what I wanted.

4

It turns out that the screen size specifications for the “S6 Edge”-setting in local preview is incorrect.
PixelsPerPoint is set to 3, but it should have been 4.

If you choose “Customize…” at the bottom of the “Device” menu in local preview then the tool will save a devices.json file in the project directory. You can edit that one to set the correct settings (and add new device configs if you want to).

It’s unfortunate that this had such a large effect on your development but we also strongly recommend using device preview to test on real devices (and multiple devices) during development.

I’ll make sure the default settings for local preview are fixed.