自適應設計+ jQuery的罰款

-2

我使用了一些非常基本的jQuery強制東西到位時，他們被到處移動：自適應設計+ jQuery的罰款

function ipad() { 
var width = jQuery(window).width(); 
if (width < 1200 && width >= 768){ //if tablet 
jQuery('.mobbut').css('width', '33.333%'); 
jQuery('#re2').css('max-width', ''); 
} else { 
jQuery('.mobbut').css('width', '100%'); 
jQuery('#re2').css('max-width', '400px'); 
} 
if (width < 768){ //if mobile phone 
jQuery('._btnselect').hide(); 
} else { 
jQuery('._btnselect').show(); 
} 
} 

jQuery(document).ready(function() { 
ipad();//run when page first loads 
}); 
jQuery(window).resize(function() { 
ipad();//run on every window resize 
}); 
jQuery(window).load(function() { 
ipad();//run when page is fully loaded 
});

到目前爲止，我的網站是完美的在Chrome，Safari瀏覽器的iPad，iPhone ，但由於某種原因，當您將Firefox窗口大小調整爲小於1200像素寬時，它看起來很亂。自己嘗試here's the webpage。這與jQuery或更多的頁面佈局有關嗎？我從另一位設計師那裏繼承了這個主頁，它以前是建立在表格上的，所以這可能會導致FF問題。

來源

2014-05-02 user3589055

爲什麼你不使用媒體查詢？ http://css-tricks.com/css-media-queries/ – alexmngn

^這正是媒體查詢的目的。 –

我試過使用媒體查詢，他們沒有工作，我不得不轉向jQuery來獲得結果。 – user3589055

我跑了您的網站firebug（我不建議使用它）啓用，並且誤差在下面的函數

** function futsal(){ 
    var wid = jQuery(window).width(); 
    if (wid <= 1024 && width >= 768){ //if tablet **

就在那裏，你聲明VAR WID，再試着寬度

我同意上面的所有意見，但使用媒體查詢。這很容易。

來源

2014-05-02 15:43:10 dops

任何想法爲什麼這會產生錯誤以及如何解決它？ – user3589055

@ user3589055正如提到的那樣，這個函數的「寬度」是多少？你可能意思是「wid」。 – MiniRagnarok

@MiniRagnarok wid是變量，但我現在看到一個錯誤，我寫了寬度而不是wid。現在這個問題已經解決了，除了頁腳現在可以正常工作以外，該網站在屏幕尺寸小於1200時仍然顯得很糟糕。 – user3589055

我試過使用媒體查詢，他們沒有工作，我不得不轉向jQuery來獲得結果。

如果他們不工作，這可能是因爲語法不正確。試試這個樣子，這是非常正是您的jQuery是幹什麼的，但要簡單得多：

#re2 { 
    max-width: 400px; 
} 
.mobbut { 
    width: 100%; 
} 

@media only screen and (max-width: 767px) { 
    ._btnselect { 
    display: none; 
    } 
} 

@media only screen and (min-width: 768px) and (max-width: 1199px) { 
    #re2 { 
    max-width: none; 
    } 
    .mobbut { 
    width: 33.333%; 
    } 
}

- 編輯 -

因爲它看起來像你想瞄準了iPad。試試這些媒體查詢，從this post：

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
}

，因爲它們是基於device-width而非width的頁面，這些可能比你的jQuery的調整工作更加可靠。

來源

2014-05-02 15:52:36 jshanley

自適應設計+ jQuery的罰款

回答

相關問題