現場部署網站。在Chrome/Phone/Safari中一切都很好。現在在現場的東西是搞砸了

我完全吹，並且完全沒有線索如何找出這一個。到目前爲止，我一直在JSFiddle中開發一個網站模板。現在我已經有足夠多的代碼，我決定將它部署到我的舊主機之一。我所做的只是將css，js和html保存到單獨的文件中，然後將index.html中的css和js以及jquery 2.0.2和jquery easing插件鏈接起來。現場部署網站。在Chrome/Phone/Safari中一切都很好。現在在現場的東西是搞砸了

//編輯 Aight。 'body {margin：0; padding：0}'修復了導航欄問題。但它仍然完全搞砸了電話。任何機會JSFiddle都有一些「移動」措施？ 末編輯//

// EDIT 2全屏手機截屏VS Chrome瀏覽器的移動視圖檢查三星Galaxy S3。什麼可能導致移動視圖中奇怪的寬度和高度？ screns chromescreen 編輯2 //

//編輯3就像我說的一切的結束與的jsfiddle結果精絕。下面是小提琴在手機上的外觀截圖。 JSFiddle上必須有一些東西讓它工作，這正是我在我的網站上所缺少的，這就是爲什麼它只會在那裏混亂。小提琴結果是絕對完美的響應，它只是在網站上標出擲骰子編輯3 //

// EDIT 4添加<meta name="viewport" content="width=device-width">到頭部的 jsfiddle phone screen 末，使它變得更糟。：/ 編輯結束4 //

Here is the JSFiddle result當我在手機上打開此頁面時，在Chrome瀏覽器或Safari瀏覽器中，一切正常。

The live site is here

這似乎是在Safari相同。

但在鉻導航是由於某些原因8個像素遠離「左」，沒有它在CSS中指定，我不能通過做margin-left:-8px解決這個問題，因爲然後我錯了它在Chrome中..這是這

最後當我打開活動網站我的Chrome瀏覽器Android手機上的寬度完全搞砸了。

我是否缺少一些我無法在部署中重現的JSFiddle設置？如果有人願意在各種瀏覽器中觀看現場和小提琴，並告訴我可能導致這些問題的原因，我將非常感謝。

我會期待您的回覆。

來源

2014-12-18 Cream Whipped Airplane

看起來像回答了！設計的好開始。看起來不錯！ – JakobMillah

它還沒有答覆:(它完全搞砸了電話視圖 –

你看，我會看看它，電話往往搞砸了，尤其是當網站有動畫等。 – JakobMillah

默認情況下，填充設置爲body。刪除該填充，你可以。

body { 
    padding: 0; 
    margin: 0; 
}

這將解決你在手機上具有縮放問題。

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

來源

2014-12-18 20:25:25

'margin：0'就是他在這裏忘記的內容，並且請注意，這是最佳做法_not_如果值爲0，則包括一個度量單位 –

Aight。'body {margin：0; padding：0}'修復了導航欄的問題，但它仍然完全搞亂了手機，JSFiddle有一些「移動「在屏幕上的措施？ –

在鉻打開並啓動移動視圖。您可以在那裏調試。 –

現場部署網站。在Chrome/Phone/Safari中一切都很好。現在在現場的東西是搞砸了

回答

相關問題