停止鏈接的打開取決於窗口的大小
[英]stop links opening depending on window size
問題描述
我試圖阻止我所有帶有class="blocker"屬性的鏈接在小屏幕（例如iPhone）上打開。 目前，圖像已設置為使用prettyPhoto打開，我希望將其保留在更大的屏幕上。 我在這里進行了查找，以找到可幫助您使用javascript的部分（我對javascript還是新手），並提出了$(window).width()和$(window).height()以及preventDef命令。 我試圖將其合並到<head>部分的if語句中，如下所示（包括其他js腳本）：
<head>
...
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="scripts/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function sizeChecker(){
if ($(window).width() || $(window).height() < 641) {
function imgHandler() {
document.getElementByClass("blocker").addEventListener("click", preventDef, false);
}
}
</script>
</head>
在<body>部分中列出了圖像，並在其后跟隨prettyPhoto代碼，如下所示：
<body>
...
<div class="centered_image">
<a href="image1.jpg" rel="prettyPhoto[gallery]" class="blocker">
<img class="img_style" src="image1.jpg" >
</a>
</div>
<div class="centered_image">
<a href="image2.jpg" rel="prettyPhoto[gallery]" class="blocker">
<img class="img_style" src="image3.jpg" >
</a>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
...
</body>
我的目標是讓網站在大於640x960的屏幕以及小於該屏幕的所有屏幕上使用prettyphoto插件，僅顯示沒有活動鏈接的圖像。 這實際上可行嗎？
非常感謝
2 個解決方案
解決方案1
1 已采納 2013-02-14 17:31:24
您可能必須分別檢查高度和寬度，僅添加“ OR”將不會：
$(function() {
if ($(window).width() < 641 || $(window).height() < 641) {
$('.blocker').on('click', function() {
return false;
});
}
});
也無需在每次點擊時都執行此操作，只需在頁面加載時執行此操作即可，其效果相同。 一個更好的主意是在調整大小時執行此操作，或者檢查screen而不是window以獲取屏幕大小等。
解決方案2
0 2013-02-14 19:25:27
有兩種方法可以做到這一點。
首先有點像您嘗試過的，通過測量屏幕尺寸並有條件地加載
// Arbitrary width
if ($(window).width() <= 480) {
//do stuff for small screem
} else {
//do stuff for large screen
}
或者，您可以使用媒體查詢將具有內容的元素添加到主體，然后讀取內容。 理解起來有點復雜，但是在斷點處的css中
@media all and (min-width: 400px) {
body:after {
content: 'widescreen';
display: none;
}
}
然后在您的javascript中查找該元素並對其進行處理。
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if(size.indexOf("widescreen") !=-1 || null) {
//do something
}
第二個示例來自Jeremy Keith的博客
aref鏈接在新窗口中打開
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.