PhoneGap
wp7
英文原文：
PhoneGap on WP7 tip #1: Handling Orientation
本文首要引见在 Windows Phone 7 下运用 PhoneGap 在处置屏幕扭转时的办法，也就是说当用户将手机从横屏到竖屏转换时，屏幕上的内容应当响应的实行调剂，不然可能会招致某些元素显示异常而影响交互。
起首我们在 Visual Studio 运用 PhoneGap 的项目模版创立一个新项目：
你需求点开上图界面中右边面板的 Visual C# 才干显示模版的列表。
创立完项目后，这是一个 Sliverlight for Windows Phone 的项目，而 PhoneGap 运转在一个宿主的 Sliverlight XAML 页面中。默许状况下，项目是运用竖屏方法运转的，你可以经过 F5 键运转项目，然后点击屏幕翻转来进入横屏形式。
横屏形式以下图所示：
你会发明我们阿谁测试顺序在横屏下，文字显示并没有响应调剂过去。
要让使用顺序支撑横屏显示形式是很容易的。在处理计划阅读器中，双击 MainPage.xaml 文件，在翻开的属性窗口中找到 SupportedOrientations 并将其值改成PortraitOrLandscape. 你也能够直接在 XAML 文件中修正；别的另有一个 Orientation 属性用来把持顺序启动时的屏幕形态。
再次运转顺序，并扭转屏幕，你将会失掉以下的后果：
搞定了！
别的，你也能够运用 JS 代码来把持屏幕的扭转，下面是一个容易的例子：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>PhoneGap WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript">
// provide our own console if it does not exist, huge dev aid!
if(typeof window.console == "undefined")
{
window.console = {log:function(str){window.external.Notify(str);}};
}
// output any errors to console log, created above.
window.onerror=function(e)
{
console.log("window.onerror ::" + JSON.stringify(e));
};
console.log("Installed console ! ");
</script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready",onDeviceReady,false);
// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
document.getElementById("welcomeMsg").innerHTML += "PhoneGap is ready! version=" + window.device.phonegap;
window.addEventListener("orientationchange", orientationChange, true);
}
function orientationChange(e) {
var orientation = "portrait";
if (window.orientation == -90 || window.orientation == 90) orientation = "landscape";
document.getElementById("orientation").innerHTML = orientation;
}
</script>
</head>
<body>
<h1>Hello PhoneGap</h1>
<div id="welcomeMsg"></div>
<div id="orientation">portrait</div>
</body>
</html> 留意新的 DIV 用来显示以后的屏幕标的目的信息，而
orientationChange 函数封装了
onDeviceReady 事情 。
假如你盼望在 PhoneGap 外处置屏幕扭转，你也能够运用 C# 事情处置器。只需在 MainPage.xaml 的属性窗口中的 Events 页中找到 OrientationChanged 事情，经过双击事情名可以创立一个新的事情处置函数。
双击后 MainPage.xaml.cs 窗口将翻开，可以编辑代码：
本文中的一切译文仅用于进修和交换目标，转载请务必注明文章译者、出处、和本文链接。
2KB翻译任务按照
CC 协议，假如我们的任务有进犯到您的权益，请实时联络我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
