我正在尋找基于設備的影像旋轉。例如，如果網站在桌面上加載，它應該加載 desktop.png，如果在移動設備上加載相同的網站，它應該加載 mobile.png
我的 JS 代碼：
<script type="text/javascript">
if (screen.width <= 720) {
document.write('<a href="http://example.com/mobile"><img src="mobile.png"></a>');
} else {
document.write('<a href="http://example.com/desktop"><img src="desktop.png"></a>');
}
</script>
我已將 JS 代碼重寫為 PHP 代碼：
if (get($screen, "width") <= 720.0) {
echo "<a href=\"http://example.com/mobile\"><img src=\"mobile.png\"></a>";
} else {
echo "<a href=\"http://example.com/desktop\"><img src=\"desktop.png\"></a>";
}
上面的 JavaScript 代碼運行良好，但我的 PHP 代碼出現錯誤。任何人都可以幫忙修復它嗎？
uj5u.com熱心網友回復：
答案是否定的。您無法使用 php 在網路上實作影像旋轉，因為 php 是一種服務器端語言，要在網路上創建任何效果，您需要 css（簡單效果）或javascript（復雜效果）
使用服務器端渲染 (php)，您只能使用一種模板或系結變數在服務器中創建所需的 javascript 標記作為字串并將其回傳到 Web 瀏覽器。你不能創造或不存在一種至少在這一代可以替代經典javascript的服務器端技術或框架。
ssr : 服務器端渲染
PHP 是一種用于開發后端程式的服務器語言。從 web 開發的早期開始，php 和其他語言（java、python、c#、ruby 等）就被用于創建網頁。在技??術上，服務器端負責創建 html，因此當用戶進入 acme.com 時，服務器端創建 html 并將其與準備顯示的內容一起回傳。
在這些框架中是經典的使用庫，它們能夠使用模板創建 html，就好像它是一個簡單的字串一樣。
<? if ($condition): ?>
<p>Content</p>
<? elseif ($other_condition): ?>
<img src="other-content.png" alt=""/>
<? else: ?>
<script type="text/javascript">
document.write('<a><img src="$SOME_VAR.png"></a>');
</script>
<? endif; ?>
如您所見，在服務器 (php) 中，您只需將 html 或 javascript 創建為簡單字串。在最后，這些內容將通過網路瀏覽器進行評估，并在網路瀏覽器只是理解HTML，JavaScript中，CSS，字體等 瀏覽器不關心誰創建的HTML / JavaScript中的服務器（JAVA，C＃， php、python、ruby 等）。
csr : 客戶端渲染
基本上和ssr相反。內容是在廣告客戶端創建的，更具體地說是 Web 瀏覽器。所以當用戶進入 acme.com 時，服務器只回傳一個最小的 index.html 和一個大的 javascript 檔案。這個 javascript 檔案負責使用javascript和ajax呈現或創建整個網頁。
在這一層，技術（javascript）能夠訪問一些設備資訊或資源，如螢屏尺寸、攝像頭等。您無法在服務器端層（php、java、c#等）中獲取這些值
更多細節在這里
- https://stackoverflow.com/a/69511019/3957754
uj5u.com熱心網友回復：
PHP 對客戶端的螢屏大小一無所知。最好的解決方案是根據螢屏大小更改內容的 JavaScript。
對于<picture>元素，您可以使用媒體查詢來根據螢屏尺寸確定要顯示的影像。
在下面的示例中，mobile.png將針對寬度最大為 720desktop.png像素的螢屏顯示 ，并且將針對其上方的所有尺寸顯示影像。
<a id="dynamic-link" href="">
<picture>
<source srcset="mobile.png" media="(max-width: 720px)">
<img src="desktop.png" alt=""/>
</picture>
</a>
錨標簽沒有這種功能。但是我們可以通過使用window.matchMedia()和使用相同的媒體查詢來添加它，href只要螢屏尺寸發生變化，就可以更改錨點的值。
// Select the link element.
const dynamicLink = document.getElementById('dynamic-link');
// If the link exists on the page, continue.
if (dynamicLink !== null) {
// Observe a media query.
const mediaQuery = window.matchMedia('(max-width: 720px)');
mediaQuery.addEventListener('change', event => {
// If the screen in 720px or less.
if (event.matches) {
dynamicLink.href = 'http://example.com/mobile';
// All sizes above.
} else {
dynamicLink.href = 'http://example.com/desktop';
}
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/393881.html
標籤：javascript php html 查询 移动的