我有一个客户，我正在开发一个小部件，希望我们的小部件能够跨设备显示。 我正在寻找这样做的最佳实践方式。
目前他们所拥有的是一个链接在那里的网站打开我们的iframe作为弹出使用qtip和jquery见下文：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.tools-1.2.5.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.qtip-1.0.0-rc3.js"></script>
<link href="Content/Reset.css" rel="stylesheet" type="text/css" />
<link href="Content/RTL.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.closeWidget
{
left: 420px;
position: absolute;
top: 316px;
}
.emsTitle
{
background-color: transparent;
}
#OpenOneByFour
{
}
#OpenOneByFour
{
}
.closeWidgetOBT
{
left: -46px;
position: absolute;
top: 209px;
}
</style>
</head>
<body>
<!-- This is auto centered -->
<div id="centeredTechnology" class="centered">
<!-- We have a shadow effect to the left of the main content box -->
<div id="leftShadowTechnology" class="leftShadow">
</div>
<!-- the central content box top to bottom -->
<div id="centerTechnology" class="center">
<!-- The Top Green Login box -->
<div id="loginBox">
<div id="loginFields">
</div>
</div>
<div id="topLineTechnology" class="topLine">
</div>
<div id="contentTechnology" class="content">
<div class="fullWidth-column">
<h1 title="Video Production and Hosting" style="clear: both; margin-top: 40px;">
Widget
</h1>
<p>
click <a href="#" id="OpenOneByFour">here</a> to launch widget pop up demo
</p>
</div>
</div>
<div id="footer">
</div>
<div id="footerMenu">
<div>
<br />
</div>
</div>
<div id="copyright">
</div>
</div>
<!-- we have a right shadow effect to the right of the main content box -->
<div id="rightShadowTechnology" class="rightShadow">
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () { // Create the modal backdrop on document load so all modal tooltips can use it
$('<div id="qtip-ras-blanket">').css({
position: 'absolute',
top: $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
left: 0,
height: $(document).height(), // Span the full document height...
width: '100%', // ...and full width
opacity: 0.7, // Make it slightly transparent
backgroundColor: 'black',
zIndex: 5000 // Make sure the zIndex is below 6000 to keep it below tooltips!
}).appendTo(document.body) // Append to the document body
.hide(); // Hide it initially
});
$('#OpenOneByFour').qtip({
content: {
title: {
text: '<div class="emsTitleOTB"></div>',
button: '<img class="closeWidgetOBT" src="http://widgeturl.com/Content/Images/close.png" alt="" />'
},
text: '<iframe style="background-color: transparent; overflow-y: hidden; overflow-x: hidden;" width="779" height="203" scrolling="no" src="http://WidgetURL.co.uk/Widgets/OneByFour/8718114621562"></iframe><div style="clear: both;"> </div>'
},
position: {
target: $(document.body), // Position it via the document body...
corner: 'topMiddle' // ...at the center of the viewport
},
show: {
when: 'click', // Show it on click
solo: true // And hide all other tooltips
},
hide: false,
style: {
width: 779,
height: 203,
padding: '0px',
title: { 'padding-bottom': '0', 'padding-left': '0', 'padding-top': '0', 'background-color': 'Transparent', 'width': '779', 'height': '203' },
border: {
width: 0,
radius: 0,
color: '#000000'
}
},
api: {
beforeShow: function () {
// Fade in the modal "blanket" using the defined show speed
$('#qtip-ras-blanket').fadeIn(this.options.show.effect.length);
},
beforeHide: function () {
// Fade out the modal "blanket" using the defined hide speed
$('#qtip-ras-blanket').fadeOut(this.options.hide.effect.length);
}
}
});
//]]>
</script>
所以上面的以下部分获取了iframe：
$('#OpenOneByFour').qtip({
content: {
title: {
text: '<div class="emsTitleOTB"></div>',
button: '<img class="closeWidgetOBT" src="http://widgeturl.com/Content/Images/close.png" alt="" />'
},
text: '<iframe style="background-color: transparent; overflow-y: hidden; overflow-x: hidden;" width="779" height="203" scrolling="no" src="http://WidgetURL.co.uk/Widgets/OneByFour/8718114621562"></iframe><div style="clear: both;"> </div>'
},
position: {
target: $(document.body), // Position it via the document body...
当在手机浏览器中打开时，它太小了，当你放大它时它不喜欢它 - 偏离中心等......
我一直在研究显示小部件的不同方式，例如使用CSS3 @media - 并尝试仅更改小部件的css但我遇到问题，因为iframe在jquery中设置了宽度/高度（我会真正喜欢做的是在普通桌面上弹出，但是在一个较小的设备上 - 即点击这里链接点击一个手机，我希望它能填满整个页面）
我尝试了以下内容：
@media only screen and (touch-enabled: 0) {
.w6392597
{
width: 133px;
height: 135px;
overflow: hidden;
float: left;
background-color:lightblue;
}
}
@media only screen and (max-device-width: 650px) {
.w6392597
{
width: 133px;
height: 135px;
overflow: hidden;
float: left;
background-color:orange;
}
}
只是为了看看颜色和手机上是否有差异，我的手机是橙色而不是桌面 - 我添加了以下内容
<!-- Viewport is very important, since it affects results of media
query matching. -->
<meta name="viewport" content="width=device-width">
<!-- Include device.js in each version for redirection. -->
<script src="Scripts/device.js"></script>
有没有人对将弹出式窗口小部件放到跨设备使用的网站的最佳方法有任何建议，即使我目前正在使用jquery和iframe这可以改变 - 任何建议赞赏...