Question

Currently I have a HTML document with viewport width set to device width. My issue is with adapting viewport width to WebViews that are narrower than the full device width. Using device width in this case will render the document wider than the WebView, which I am trying to avoid.

The document is to be displayed in both Android and iOS apps, and is built using only document relative sizes for all elements. It is therefore dependant on the document width being correctly adapted to the width of the view.

How can I fit the viewport width to the actual width of the WebView instead of the device width?

Answer 1

I am dealing with something similar in Android. So that you understand my situation: my testing device width actual resolution is 540 and the fixed width of the design is 640. My goal was to set the webview used in cordova to zoom out to show the full design width.

Does this code help you resolve the issue on Android?

public class MainActivity extends DroidGap {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/index.html");

    super.appView.getSettings().setSupportZoom(true);
    //super.appView.getSettings().setBuiltInZoomControls(true);

    super.appView.getSettings().setLoadWithOverviewMode(true);
    super.appView.getSettings().setUseWideViewPort(true);
    }
}