Why is the web page zooming in after rotating a mobile device from landscape to portrait?

I have a webpage optimized for viewing in a mobile.

I am utilizing the viewport meta tag <meta name = "viewport" content = "width = device-width"> which detects the device width and sets the viewport width to that. This means my webpages load properly in a mobile browser rather than looking ridiculously zoomed out.

When I load the page on my mobile (which is a Samsung Galaxy S2) in portrait mode it looks fine, I rotate to landscape and it looks fine, but then if I rotate back to portrait again the page has zoomed in slightly. I either have to zoom out or scroll horizontally.

Why is my mobile browser doing this and how can I stop it happening?

See screenshot for a visual aid to what is happening.