HTML，我如何使网页适合屏幕？

问题描述：

我正在开发android应用程序。我的应用程序具有非常大的尺寸（APKfile），这是因为一些高质量的图像。我决定将它移入服务器和应用程序中，只需加载网页并通过网页显示即可。每个HTML页面只有一个图像（没有文本和其他项目），所有图像的宽度为450像素，而每个图像的高度可能不同。当我加载网页时，图像不适合屏幕，并且比我的屏幕大。我需要有适合屏幕的图像。HTML，我如何使网页适合屏幕？

我知道我可以从服务器加载图像，但是当我做它时，长宽比不好，图像压扁。其宽度拉伸而高度未起作用。我使用的代码是android:scaleType="fitXY"

由于某些原因，我不希望完全更改代码，我更愿意找到一种方法将更改应用于html文件。我的HTML文件是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Team Championship</title> 
    </head> 


    <body> 
     <img align="left" alt="Team Championship" src="../image/team_championship.png"/> 

    </body> 
</html>

请告诉我，如何有可能在所有设备上显示图像适合屏幕？对不起，虽然我在Android编程方面还不错，但我并不熟悉web编程。感谢

如果您不希望图像被拉伸/压扁，请对'scaleType'使用'CENTER_INSIDE'。 “FITXY”只会使图像与容器大小相同，如果它们具有不同的纵横比，则不起作用。 – 2012-03-30 21:38:22

答

谢谢你们，

，但更容易和最快的方式正在改变上面的代码，来此：

<img align="left" alt="Abudhabi" src="../image/track_abudhabi.png" width="100%"/>

现在所有设备的图像适合屏幕。

答

如果你知道你的图像的尺寸，你可以设置为您的网站规模来看，例如：

DisplayMetrics displayMetrics = new DisplayMetrics(); 
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); 

int imgWidth = ...; 
int imgHeight = ...; 

if(imgWidth > displayMetrics.widthPixels) { 
    int scaleInPercent = 100 * displayMetrics.widthPixels/imgWidth; 
    m_webView.setInitialScale(scaleInPercent); 
}

只需添加在检查高度，你应该是好去。

答

我正在开发一个移动网站。测试设备是iPod Touch和两款Android手机。 iPod Touch没有问题，但Android手机坚持让图像成为全尺寸。所以你只能看到约25％的图像。我搜索了“图形到设备的适合网页”，它引导我到这里。

宽度=“100％”的添加完全按照我需要的方式工作。简单！谢谢。

答

如果您正在使用的WebView，最好和最简单的方法是添加head标签内的样式标签：

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <style> 
      img{ 
       max-width:100%; 
       height:auto; 
       display:block; 
       margin-left:auto; 
       margin-right:auto; 
      } 
     </style> 
     <title>Team Championship</title> 
    </head> 


    <body> 
     <img align="left" alt="Team Championship" src="../image/team_championship.png"/> 

    </body> 
</html>

这样，所有的图像都适合和居中。

HTML，我如何使网页适合屏幕？

相关推荐