如何在多種屏幕尺寸上查看我的網站？

Question

好吧，所以我知道如何編寫多種屏幕尺寸的代碼。但是，在使我的網站上線之前，我不知道如何在移動設備上查看我的代碼。請幫忙！

Answer 1

你可以玩模擬器，可以模擬各種蜂窩設備。例如，可以使用名爲Bluestacks的程序下載這些程序。

Answer 2

如果您使用的是谷歌瀏覽器，則可以打開一個網站並按F12（在Windows上）進入開發者模式。

在左上方，您可以看到一個小智能手機圖標。

單擊它並選擇一個設備。然後刷新頁面。

Chrome將直接從您的計算機模擬智能手機用戶的體驗，您可以從那裏測試它。

這是在模擬器上這個問題的看法：

Answer 3

這裏是解決辦法，如果你使用的是Safari。

1. 使用Safari>首選項>高級啓用「開發」菜單欄。您的菜單欄應如下所示：
2. 轉到您的網站
3. 轉到開發>用戶代理並選擇您想要模擬的設備/瀏覽器。

Answer 4

有兩種選擇。

1. 使用模擬器。

你需要什麼 - 是任何現代瀏覽器。幾乎每個現代瀏覽器都會爲您提供大致相似的仿真器功能，您可以在其中選擇目標設備/分辨率。 @intboolstring & @Pither已經提到了safari &鉻選項。 IE & Edge具有類似的功能（您可以自行探索或查看此鏈接IE Emulator feature）。

使用實際裝置。

你需要什麼 - 1）無線路由器2）你的開發機/筆記本電腦具有Web服務器（如IIS在Windows上）& 3）某些移動設備（我會假設你會擁有ATLEAST一個智能手機一個移動瀏覽器）。

您將需要將您的設備連接到開發機器的無線和設置防火牆，以允許訪問您的本地無線網絡上的網站。 Check out this answer。

完成此操作後，您應該能夠通過在手機瀏覽器中綁定http://your.dev.machine.ipv4:port-if-applicable/landingpage.html將您的網站加載到無線連接的任何設備上。

（找到你的機器的IPv4地址，轉到命令提示符，輸入ipconfig，然後按回車 - 我假設你使用的是Windows）

你可能會限制你的測試，以更小的組設備（那些你可使用）。但是這會給你一個真實世界的想法（如果不是更好的話），你的網站如何在設備上呈現&。