ウィジェットをデバイス間で表示したいウィジェットを開発しているクライアントがいます。これを行うためのベストプラクティスの方法を探しています。
現時点で彼らが持っているのは、qtip と jquery を使用して iframe をポップアップとして開くサイト上のリンクです。以下を参照してください。
<!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 で幅/高さを設定されているため、問題が発生しました (私が本当にしたいこと) do は通常のデスクトップ上にあり、そのままポップアップしますが、小さいデバイス上に表示されます。つまり、[ここをクリック] リンクがクリックされたときの電話です。ページ全体を埋めたいと思います)
私は次のことを試しました：
@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>
デバイス間で使用される Web サイトにポップアップ タイプのウィジェットを配置するための最良の方法について誰かアドバイスを得たことがありますか?現在 jquery と iframe を使用しているにもかかわらず、これを変更することができます-アドバイスをいただければ幸いです....