CSS寬屏背景圖在PC端網頁設計中已經十分的普遍，然而，當這種設計應用到手機端頁面上時，你會發現問題并不容易解決。通過以下代碼來實現一種在手機上正確顯示CSS寬屏背景圖的方法：

body {
background: url(your-image-path.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;    
}

上述CSS樣式通過在body元素中添加一個背景圖來達到寬屏背景圖的效果。其中，“no-repeat”表示背景圖不會被重復，而“center center”會將背景圖在水平和垂直方向上都進行水平和垂直居中的對齊。在移動端，為了使背景圖占據整個屏幕，我們則需要進行更多的設置。

首先，我們需要將背景圖的大小設置為盡可能地大，以覆蓋整個屏幕。這就是代碼中出現的“-webkit-background-size”、“-moz-background-size”、“-o-background-size”和“background-size”的作用。這四種語法分別用于適配不同的瀏覽器，但它們的功能都是將背景盡可能地放大，使其能夠覆蓋整個屏幕背景。

然而，通過上面的CSS樣式，在手機端的情況下，很可能會發現，背景圖只占據了屏幕的一部分，而不是整個屏幕。這是因為手機瀏覽器默認情況下會將內容縮小，以避免用戶需要不斷的滾動頁面。解決這個問題的一個方法是添加以下meta標簽在你的HTML頭部：

這條meta標簽告訴瀏覽器將內容的寬度設置為設備的寬度，以確保頁面不會被縮小。通過以上的方案，使用CSS寬屏背景圖在移動設備上進行設計變得不再困難。