Android Web应用适配疑问：需保留/移除哪些代码兼顾平板与手机？

Hey there, let's break down what's going wrong and how to fix it so your app works seamlessly on both phones and tablets. The core issue here is that your current configuration excludes small-screen devices (phones) and has misplaced code that's blocking compatibility.

What to Keep #

• The entire <supports-screens> tag: This already correctly declares your app supports all screen sizes (small, normal, large, xlarge) and densities—this is the foundation for cross-device compatibility.
• All existing <screen> entries inside <compatible-screens> (for normal, large, xlarge screens, plus the Nexus 7 special case): These correctly cover tablet-sized devices.
• The three 480dpi screen entries, but we’ll need to move them into the <compatible-screens> container where they belong.

What to Remove #

• The <!--no small size screens --> comment and the missing small-screen entries: This is why phones aren’t compatible—you’ve explicitly left them out of the supported device list.
• The three <screen> tags floating outside the <compatible-screens> container: These are invalid where they are; they won’t affect compatibility unless nested inside the <compatible-screens> block.

Updated Working Code #

<supports-screens 
    android:anyDensity="true" 
    android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" /> 

<compatible-screens> 
    <!-- Add small screens to support phones -->
    <screen android:screenSize="small" android:screenDensity="ldpi" />
    <screen android:screenSize="small" android:screenDensity="mdpi" />
    <screen android:screenSize="small" android:screenDensity="hdpi" />
    <screen android:screenSize="small" android:screenDensity="xhdpi" />
    
    <!-- Existing normal screen support -->
    <screen android:screenSize="normal" android:screenDensity="ldpi" />
    <screen android:screenSize="normal" android:screenDensity="mdpi" />
    <screen android:screenSize="normal" android:screenDensity="hdpi" />
    <screen android:screenSize="normal" android:screenDensity="xhdpi" />
    
    <!-- Existing large screen support -->
    <screen android:screenSize="large" android:screenDensity="ldpi" />
    <screen android:screenSize="large" android:screenDensity="mdpi" />
    <screen android:screenSize="large" android:screenDensity="hdpi" />
    <screen android:screenSize="large" android:screenDensity="xhdpi" />
    
    <!-- Existing xlarge screen support -->
    <screen android:screenSize="xlarge" android:screenDensity="ldpi" />
    <screen android:screenSize="xlarge" android:screenDensity="mdpi" />
    <screen android:screenSize="xlarge" android:screenDensity="hdpi" />
    <screen android:screenSize="xlarge" android:screenDensity="xhdpi" />
    
    <!-- Nexus 7 special case -->
    <screen android:screenSize="large" android:screenDensity="213" />
    
    <!-- 480dpi screen support (moved inside compatible-screens) -->
    <screen android:screenSize="normal" android:screenDensity="480" />
    <screen android:screenSize="large" android:screenDensity="480" />
    <screen android:screenSize="xlarge" android:screenDensity="480" />
</compatible-screens>

A Simplified Alternative #

Since this is a web app, you might not even need the <compatible-screens> tag at all! Web content is naturally responsive, so if your web app uses responsive design (media queries, flexible layouts), you can remove the entire <compatible-screens> block and just keep the <supports-screens> tag. This lets Android handle scaling automatically for all devices, which is often simpler and more maintainable.

内容的提问来源于stack exchange，提问作者Mahmoud Manson