Develop Reference

What is the best image width for mobile browsers in vertical mode?

I am creating an extremely simple web page: it simply shows images one after the other until the bottom of the page.
Problem is... I am not sure what size images we should be using.
What is the ideal width of the images in a vertical browser?
Does this differ between android and iphone?

Just use the viewport size tag so the mobile devices will automatically resize the page to the correct dimensions.
You can for example just make a page which is 1024 pixels wide and define the viewport meta tag to be 1024px so all screens know it is supposed to be rendered as if the total screen width is 1024 px.
<meta name="viewport" content="width=1024">
This way you don't have to change the width of your design for each device. The device will scale the page for you to fit the screen.
Most mobile sites use a 480px width. Perhaps to improve loading time you better also use a smaller one since smaller images load faster and the phone will resize them anyway.
PS: Works on all modern devices across all platforms.

viewport meta tags issue on mobile devices

I have a somewhat-responsive Bootstrap website. Above 1200px, the container is 1170px wide and below that, it scales down to 970px. Anything below that will also get the 970px version.
In my meta tags, I have this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Everything works perfectly on Desktop computers as well as on iPhone or iPad devices. However on Android based mobiles like Samsung Galaxy (where the viewport is 360x640px I believe), the website shows fine too in landscape mode, except that it is zoomed in every time a page loads. Meaning it shows fine, but the user would have to scroll left and right. The user can zoom out and then it shows full-width without having to scroll, but the next time a page loads, the same happens again.
Is there any simple way to adjust/fix this?
I tried removing the width=device-width part, but that messes with the design on iOS devices and 1px lines don't show properly.

Try using
#media (whichever desired screens)
html{zoom:0.7} // this value is not calculated just an example
You can calculate using device width / your html width
This is has worked for me .. i need to zoom out on tablets so i added this..

How to fit web page to webview's width when webview resizes (without reloading)

I have an HTML page and a full-screen Android webview. The HTML content is larger than the webview's visible area. I want to fit the HTML content to the width of webview.
What's really important is this: when the device's orientation changes, the webview will not reload, meaning it will just resize and the content would still fit to width.
One more thing: because the content has been scaled down, user can zoom it in to a maximum scale of 100%. When the content is zoomed and orientation changes, I want the content to fit-width again.
Edit 1: I can change meta tags in the head of HTML, but its content remains larger than the webview's visible area. I'm supporting Android 2.3 and later.
Edit 2: Thanks for the suggestion on responsive web design. I know what it is and I can do it. Problem is I cannot change much of the HTML content in this case.
TL;DR: How to always fit a larger HTML content to a Android webview's width as the webview resizes, without reloading the content. (I can change the webview, not much of the HTML.)

do following settings
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setLoadWithOverviewMode(true);

This may sound like a cop-out answer, but I think it depends on how you're building the rest of your site. Whenever I work on responsive sites, I use:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will do two things: width=device-width will find the width of your device, and send styles from your CSS that match that size (you can set styles for specific sizes in your CSS, using media queries). Initial-scale=1 will make the site show up at 100% when it loads, but still give users the option to zoom in.
If your site is developed for a specific width, you could try using:
<meta name = "viewport" content = "width = 980 (or whatever the width you're designing for)">
This will just scale down your site to fit the device width. Nothing super special here, users will basically just be shown mini-desktop sites.
I'd recommend reading this Webdesign Tuts+ article. They explain the viewport meta tag well, with examples.

You need not change anything on Webview , all u need is Responsive
Html Page, If you are designer then that will solve ur issue or u can
post a part of ur Question with UI tag.
To built Responsive html pages u can visit : HERE
Result : You need to test on webview while creating your responsive
html page, default brower of android itself reflect that ur html page
is responsive or not.Once it will work in default brower in Android
device then it will work in any webview in android.
Testing : you can test ur responsive html page HERE

I would have to see the source of your HTML and CSS. You have to exclusively use % sizes and never use fixed width px sizes. Then, the user can change the size of the browser and it will dynamically resize. I also use % widths because of this. It also dynamically resizes if you use CTRL-MouseWheel (zoom).

Here's a tip for responsive web design, use positions instead of widths:
For example:
html
<div id="somediv">I'm just a div, just a regular div.</div>
css
#somediv {
left: 0; /*numeric value in pixels you would like this div to be from the left */
right: 0; /*same as above, except on the right */
height: 50px;
width: auto;
}
The div above will automatically resize based on screen width.

phone gap screen images doesn't fit the screen

android app with phone gap but the images in the html pages are bigger then the android screen. can u provide me the solution how the icons in the html page will be re sized as per the screen.
Please find the code attached. how to reset the images to fit to screen.
you can download android source code here
https://rapidshare.com/files/422996060/PhoneGap.zip

I noticed that you're specifying an absolute width in your code. If you want to just leave it up to the browser to determine the width, you could do something like this fiddle.
<img src="someImage.jpg" width="100%">
Change the size of the 'result' window and you will see that the images expand and contract to fit the page.
If you need to have exact widths in your phonegap application, you could use this plugin for Android.

you can even do that with:
img {
height:100%;
width:100%;
}

media query for orientation change in android

i have a website, that is created to be loaded by the webview on android devices
so basically what i am expecting is that the website i am going to load will fit on the screen, i.e. there should not be anything overflowing the page and introduce scrolling
when you load the site in webview in portrait mode, it loads fine, i mean everything is in place, no overflow whatever, image are in its correct size, if i change it to landscape while viewing the webview, everything is still cool, it still scales and displays the same view as it were in portrait mode, u just get that extra space around it.
however, if i load the webview in landscape mode first, it seems the content of my site is enlarged in a way because in landscape, u have that extra width, now if i turn my phone to make it portrait, it is not re-scaling my website content, so the picture is too big in the portrait, and it forces you to scroll to the right to see the entire picture.
i am trying to avoid where you need to scroll to see the content
is it because when rotating webview, say from landscape to portrait, android just take whatever is in landscape mode and put it in portrait, without trying to resize it?

There is a similar bug on iOS where rotating the device causing weird page zooming issues (see https://github.com/scottjehl/Device-Bugs/issues/2 for details). I've found that a good fix for this on iOS is to change the meta viewport tag. The meta viewport tag that seems most common (and used to come with HTML5 Boilerplate) is this:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
However, by removing the initial-scale=1.0, this bug can be sidestepped (on iOS):
<meta name="viewport" content="width=device-width">
Not sure if this fix works on Android, though.