We Keep Coding

I want to load the page in mobile as in desktop, but it has too much zoom

So i got a client that wants the site to look on mobile exactly like on desktop (small text and all). the issue im encountering is that the site zooms on mobile so i figured im doing something wrong.
i used this code:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, minimum-scale=0.1, maximum-scale=1.0">
with this it loads it zoomed, if i change the initial scale to 0.1 i get white bars around the content and the text gets enlarged.
any idea how to achieve it properly? JS or something?
thank you.

You have to use media query to make your site mobile-responsive and you only need to add this code in your <meta> tags.
<meta name="viewport" content="with=device-width, initial-scale=1.0">
You can use media query like this. In here 500px is based on mobile device width, It means all css properties in media query will run if your device width is below 500px. Otherwise it will load default css properties which you wrote earlier in the document.
#media all and (max-width: 500px) {
/*Your
Changing
CSS
Properties*/
}
You can learn more about media query in this article.

Can't change zoom in iOS on javascript

I have website 1000x820
It's not a real website, don't ask me about responsive web design.
viewport:
<meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no">
Then on Iphone SE with iOS 10.
Add to Home Screen.
Launch the application with 1000px width and it view very good with both orientation and we can change it. Of course we can't zoom.
Focus an input and type text. While nothing zoom. Unfocus the input or change an orientation and our scale will be broken. We can't change it.
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no">' );
It didn't help me.
Perversion with fonts too.
I've one bad idea. Trace changes of viewport and refresh the page.

You're meta tag includes user-scalable=no and an explicit width.
Remove the user-scalable and update width to width=device-width. You can use initial-scale=1.0 to set a zoom level for devices.
MDN - Using the viewport meta tag to control layout on mobile browsers

Page zooms out when orientation changes from landscape to portrait mode in iPad

when i change orientation from landscape to portrait mode my page zooms out in iPad.I have used vw and vh in styles.This issue is coming only for div which is using vw and vh but not for percentage div.I am usig below meta tag in my header
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
And i have tried many solution which are suggested in stackoverflow and other sites nothing is working including buggyfill.js.
This issue i am getting in iPad 2 and i tried in new iPad there it is working fine i.e ipad Air ios 8.
Please help me to fix this issue.Thanks inadvance,

Older versions of Safari don't support the vw and vh units. See here, But unless the issue is substantially affecting the usability of the site (can't navigate), I wouldn't worry too much about it, since most iOS devices would update to newer versions.
Also I'd remove the "user-scalable=no" and "maximum-scale=1.0" from the meta tag, because you're basically disallowing the ability to pinch and zoom, which is considered bad usability practice.

Phonegap orientation

My app only works in landscape mode due to some layout restrictions. Since IOS7 update, whenever I take a photo on my phonegap app, the right hand side of the screen disappears (as if the orientation changes to portrait) and I'm left with a black bar down the right hand side.
If I rotate the ipad 180˚ it resets itself and displays properly again but my client will not accept this as a solution!
Any ideas why it is happening? or how I could programatically change the orientation?

I had a similar problem with the black bar on right side. My problem occurred when the orientation changed, not from the camera. For me the solution was to change the viewport meta tag in index.html to:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
For anyone doing any digging, I found that the webView was resizing correctly, and the black bar was from the webView not re-rendering its content at the correct size.

iPhone viewport confusion / window.innerHeight

I'm having trouble fitting a site to the iphone's screen dimensions.
What I am doing is the following: I have a slideshow with a few pictures running fullscreen in the back of the page and and little text on top.
When I set up the slideshow I do the following:
$('#bg').css('width', window.innerHeight).css('height', window.innerWidth);
Then I insert the Slideshow and scale and crop the pictures accordingly. This works perfectly fine in all desktop based browsers. Yet, the iPhone does not return its actual screen size but a value of 5000 so I get a rather big slideshow. The rest of the layout seems to render perfectly fine according to the given CSS.
I do know about the viewport "thing" with the iPhone and have already read this: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html which led me to inserting the following meta-tag:
<meta name="viewport" content = "user-scalable=no, initial-scale=1" />
Yet again, this does not make any difference, the iPhone will still return a dimension of 5000px.
Anyone can tell me what I am doing wrong? Thanks a lot!

Ok, so what did the trick for me was using this combination of meta-tags:
<meta name="viewport" content="user-scalable=no, width=device-width" />

Try width=device-width in the meta tag - and make sure you dont have any other elements that are 5000px wide.