HTML – 如何在移动设备上全屏显示图像,而不是在桌面上？

概述我把图像告知我的网站正在建设中.这是一个800×600的图像,当您在桌面访问时,它会保持原始大小.这是页面中唯一的东西. 当人们从手机上访问它时,我想让它适合整个屏幕.怎么样？ <style type="text/css"> body { background-color: #6BC5C5; }</style><title>Size is being moved to another 我把图像告知我的网站正在建设中.这是一个800×600的图像,当您在桌面访问时,它会保持原始大小.这是页面中唯一的东西.

当人们从手机上访问它时,我想让它适合整个屏幕.怎么样？

<style type="text/CSS">    body { background-color: #6BC5C5; }</style><Title>Size is being moved to another server</Title><div ><img src="movedatacenter.jpg" alt="Under Maintenance" wIDth="595" height="1021" align="left"></div>

解决方法 您要使用的是媒体查询.使用媒体查询,您可以根据屏幕大小强制执行不同的CSS规则.

例如：

@media only screen and (max-wIDth: 600px) {    img#underconstruction {wIDth: 100%; height: 100%; margin: 0; padding; 0;}}

如果设备屏幕为600px或更小,那将强制一个具有underconstruction ID的img进入全宽和高度. 600是一个很好的尺寸,因为较新的iphone高度超过480.

此外,您还需要在具有以下元标记的移动设备上强制视口与1：1的比率：

<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1,maximum-scale=1,user-scalable=no"><Meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"><Meta name="HandheldFrIEndly" content="true">

总结

以上是内存溢出为你收集整理的HTML – 如何在移动设备上全屏显示图像,而不是在桌面上？全部内容，希望文章能够帮你解决HTML – 如何在移动设备上全屏显示图像,而不是在桌面上？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。