構建兼容手機的單頁 - 從哪裏開始？

我有一個不支持移動設備的網站，但作爲廣告系列的一部分，我們將發送包含優惠券的QR碼，以鏈接到此網站上的「隱藏」頁面。當然，隨着用戶將要通過手機訪問該頁面，該頁面需要啓用移動功能。構建兼容手機的單頁 - 從哪裏開始？

我的問題是，我怎麼會去這樣做？

我知道你需要一個單獨的移動樣式表，但我從來沒有這樣做過。這是最好的方法嗎？我只能訪問該網站的前端，那麼後端有什麼需要完成的？

在此先感謝和道歉，如果這似乎有點含糊。

來源

2011-08-30 zik

出色的網站來測試您的移動網站的兼容性。提供有關如何解決許多移動瀏覽器問題的有用信息。 http://ready.mobi –

謝謝，那是一個絕妙的工具！ – zik

我的問題是，我該如何去做這件事？

如果您要使用正規尺寸的顯示器和手機大小顯示在同一頁面，再看看media queries所以你可以做adaptive design（針對mediaqueri.es有一些例子。

無論你想適應顯示大小，唯一的其他主要因素是測試。請確保您在各種設備和瀏覽器的測試。

來源

2011-08-30 14:02:02 Quentin

您可以將頁面適合手機屏幕。例如，頁面寬度最大爲480px，避免使用過大的圖片，不要使用java腳本等。

來源

2011-08-30 14:00:10 Dusan

你是，你應該有一個mobile.css開始正確的。你也應該使用手機。 JS，因爲大多數重型JavaScript將不再需要，並且您希望保持請求數量和文件大小購物中心。

雖然我會建議在後端有一些東西，這可以防止加載常規的.css和.js文件，這可能基於用戶代理（對於此來說最好的方法是整個其他主題）。否則，您將不得不覆蓋原始.css文件中的每種樣式，這是提供給移動設備的太多信息。

這將是辦法，如果你想使整個網站的移動版本。既然你提到只有一個頁面，你只需做一個簡單的.css文件和一個（簡單）的網頁，其中填充移動設備的整個屏幕，使用這樣的事情：

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

一次再次，一定不要加載不必要的.css和.js文件

來源

2011-08-30 14:11:27 KyleP

你需要以使其跳轉到移動佈局有這個在你<head>。

... 

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
    <meta name="viewport" content="width=devide-width, initial-scale=1.0" /> 

    <title> ... </title> 

    ... 

    <link href="/stylesheets/mobile.css" media="only screen and (max-width: 767px)" rel="stylesheet" type="text/css" />

然後使用mobile.css樣式表設計移動站點，它將被媒體查詢自動拾取。

希望這會有所幫助。

來源

2011-08-30 17:00:05 GoGoGarrett

構建兼容手機的單頁 - 從哪裏開始？

回答

相關問題