Xamarin.Forms中各种设备上的用户界面

Question

我是Xamarin的新手。我正在开发我的第一个Xamarin.Forms应用程序。从一开始我就使用模拟器iPhone 6s iOS 9.2测试一切，一切都很好，但最后当我在iPhone 4s iOS 9.2上测试时，我得到了一些奇怪的UI，如下图所示。

在每个屏幕上，部分内容都在屏幕外。对于上面的页面，Xaml代码如下。我能做些什么才能让它在PCL中的每个设备上工作？我在Android上也发现了同样的问题。 Xaml：

<ContentPage.Content>
    <StackLayout Padding="10" Spacing="10" VerticalOptions="CenterAndExpand">
        <Button BackgroundColor="Red" TextColor="White" Clicked="btnLogout_Click" Text="Logout" WidthRequest="80" VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand"/>

            <Grid HorizontalOptions="CenterAndExpand">                      
                    <Grid.ColumnDefinitions >
                      <ColumnDefinition Width="110" />
                      <ColumnDefinition Width="110" />
                      <ColumnDefinition Width="110" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="110" />
                      <RowDefinition Height="110" /> 
                      <RowDefinition Height="110" />
                      <RowDefinition Height="110" />                                      
                    </Grid.RowDefinitions>

<!--                    First Row-->
                    <StackLayout Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"  BackgroundColor="#DAF7A6" >
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="comingInClicked"/>
                        </StackLayout.GestureRecognizers>
                        <Label Text="Coming In" FontFamily="Arial Unicode MS"  TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
                    </StackLayout>

                    <StackLayout Grid.Column="2" Grid.Row="0" BackgroundColor="#FFC300" >
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="attendanceClicked"/>
                        </StackLayout.GestureRecognizers>
                        <Label Text="Leaves/&#10;Holidays" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
                    </StackLayout>

                    <StackLayout Grid.Column="0" Grid.Row="1" BackgroundColor="#FF5733" >
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="statusClicked"/>
                        </StackLayout.GestureRecognizers>
                        <Label Text="Status" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
                    </StackLayout>

                    <StackLayout Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2"  BackgroundColor="#C70039" >
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="goingOutClicked"/>
                        </StackLayout.GestureRecognizers>
                        <Label Text="Going Out" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
                    </StackLayout>

                    <StackLayout Grid.Column="2" Grid.Row="2"  BackgroundColor="#00EC93" >
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="eventCalendarClicked"/>
                        </StackLayout.GestureRecognizers>
                        <Label Text="Event Calendar" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
                    </StackLayout>

                    </Grid>
                    </StackLayout>
    </ContentPage.Content>