jQuery 在 Windows Phone 8 手机间隙应用程序中不能很好地渲染角落

Posted 2023-03-07

技术标签:

【中文标题】jQuery 在 Windows Phone 8 手机间隙应用程序中不能很好地渲染角落【英文标题】：jQuery does not render corners well in Windows Phone 8 phone gap application 【发布时间】：2013-03-18 13:05:47 【问题描述】：

我有一个用于 Windows Phone 8 的 Phonegap 应用程序，它在内部使用网页。我在 <div> 元素内创建了一个按钮，并在该 div 内使用 data-role="footer" 选项。另外 button 是一个 <a> 元素，里面有 data-role="button" 选项。

按钮的渲染并不总是很好，出现了一些边角问题，边角不是圆角，但它是一个 90 度的白色圆角，而不是蓝色的漂亮圆角。

Windows Phone 8 是否存在不支持某些 html5 功能和/或 jQuery 功能的已知问题？

编辑 1：

来源（基本部分）：

TestButton.java：

public class TestButton extends Widget 
       private static TestButtonUiBinder uiBinder = GWT.create(TestButtonUiBinder.class);

       interface TestButtonUiBinder extends UiBinder<AnchorElement, TestButton> 

       AnchorElement mAnchor;

       public TestButton() 

            mAnchor = uiBinder.createAndBindUi(this);

            setElement(mAnchor);

            mAnchor.setAttribute("data-role", "button");

..和TestViewImpl.java：

    @UiField
    TestButton mBackButton;

    @Override
    public TestButton getBackButton() 
        return mBackButton;

.. 和 TestViewImpl.ui.xml：

  <b:TestButton ui:field="mBackButton" dataIcon="arrow-l"
                title="mI18n.back" toolbarRight="true" />

编辑 2：

Border-radius bug on <a> in IE9指出，当css3标签的某些组合不能很好地协同工作时，由于css3的不成熟性，可能会出现类似的问题。

现在，我的按钮在 Firefox 上呈现如下：

<a style="font-weight: bold;" data-role="button" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-hover-b ui-btn-up-b"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>

【问题讨论】：

它在 IE10 桌面上的渲染是否相同？您能否将您的示例发布在 jsfiddle 上，以便我查看。 IE10 桌面渲染正常。在cordova 2.5下的jqm 1.3默认主题上测试，呈现正确（WP8模拟器）。 IE10 移动版不同于 EI10 桌面版。模拟器不同于设备。有人用名为 Windows Phone 8 的移动设备对此进行了测试吗？我手机上的连接速度很慢，圆角渲染速度很慢，之前有一个白色的角度。有时加载失败或某事，因为白角停留。奇怪的是，角落并不总是加载良好，但内容总是（文本等）根据Metro 指南，我认为Metro 设计的重要元素就是没有半径的边。我将在 WP8 设备上试用它，我会告诉你进展如何。 【参考方案1】：

除非有人提出任何解决方法，否则我目前的调查显示结果是这是 jQuery 本身的一个错误，应该在 jQuery 之外找到解决方法或修复 jQuery 本身。

来源： 请查看 jQuery 演示页面，例如http://jquerymobile.com/demos/1.1.1/docs/buttons/buttons-themes.html 并观察例如Swatch "a" 来自带有 wp8 设备的演示页面。你会观察到奇怪的角落。我测试了 Lumia 920。

解决方案：等待 1.4 并希望最好，或者手动组合 1.2 和 1.3 并选择两者中最好的部分。

修改后的解决方案：是的，1.4.0 已经存在，问题似乎已经解决了 :) 他们改变了整个外观，所以问题就消失了。

【讨论】：

jQuery 1.3.1 测试页面的渲染效果优于 1.1.1 (view.jquerymobile.com/1.3.1/demos/widgets/buttons)，但那里的禁用按钮仍然很可怕：出现了更糟糕的阴影，这次甚至是错位的阴影。 jQuery 1.3.1 似乎从按钮中消除了这个问题，但是将它引入其他元素，结果乍一看似乎同样令人讨厌，所以至少现在，我不会更新到那个版本。那时我不知道，是否在按钮被更正的地方有一个版本，但其他主题仍然没有损坏。不，我目前在代码上使用 1.2.1.min 版本，那是原始版本。之间没有其他版本。等待 1.4 :) 当我提到我对您的问题的评论时，您是否尝试过覆盖样式？其实我并没有很容易地得到这个想法（我应该把它放在哪里，因为按钮被用在很多地方）现在我很满意等待新版本，因为这不是重要的功能现在，我可以在没有生活的情况下生活，我正忙于其他事情。【参考方案2】：

根据this resource，Windows Phone 7.5 及更高版本完全支持 CSS 3 Basic 样式（不透明度、背景、文本效果、圆角），这意味着您遇到的渲染问题不是由于不兼容造成的。

您可能想尝试使用 -ms prefix 以确保完整的 IE 9+ CSS3 功能，例如：

div 
    -ms-border-radius: 2px;
        border-radius: 2px;

（浏览器制造商采用 CSS 前缀来实现他们的 CSS3 草案功能版本。随着标准的成熟，这些前缀在许多情况下已经过时。在其他情况下，它们仍然是必需的；read here在 IE10 中继续使用。）

【讨论】：

对此我不太确定：***.com/questions/3162890/… 说至少 ie9 不使用任何前缀。我还在 -ms- 版本的任何地方手动添加到我的代码中，但没有任何帮助。实际上，您的消息来源也说，这个特定的（边界）没有任何前缀。是的，IE 没有border-radius 前缀（公平地说，IE 几乎每个 CSS3 属性都没有前缀）。我链接到说明使用-ms 前缀的文章，我没有说这是答案，但值得一试。【参考方案3】：

在尝试使用border-radius: 在 WP8 的 WebBrowser 组件中呈现圆形按钮时遇到类似的问题，结果是方形的。

解决方案：添加：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

到<head> 部分的顶部

【讨论】：

以上是关于jQuery 在 Windows Phone 8 手机间隙应用程序中不能很好地渲染角落的主要内容，如果未能解决你的问题，请参考以下文章

IBM Worklight 6.0 - Windows Phone 8 的报告日志比其他环境显示 USER_AGENT

windows phone 7 - phonegap 停止 jquery.ajax

Windows Phone 上的 JQuery Mobile 滑动事件

windows phone 8 和 10 的 windows phone 应用程序开发

Windows Phone 8 与 windows 8 开发技术概览