Hi I have a Windows Phone app and been trying to have the browser window resize the images on the page to fit the browser window.
I notice the emulator window does this but when I deploy to the phone I get large images. Been searching about for an answer for this. Maybe this is something I've overlooked and simple?
You can do this by setting Viewport meta tags as required.To do so just add meta tag code at start of your html string, as:
<meta name="viewport" content="width=device-width" />
you can also use minimum-scale property.
Related
I have designed a fully responsive web page using Reactjs on the browser, but when I opened it on a real phone, there were things that are "off", although I designed it on the browser for the same phone. Why is that? I have that meta tag <meta name="viewport" content="width=device-width, initial-scale=1" /> set in the index.html. The problem with this I would never know how it would look like on the real device before deployment, which is time-consuming and tedious. Why is this happening?
The browser engine on your computer and on your phone might not be the same.
Are you using the same browser on both? like chrome??
If that is not the case, there will be some differences.
Hope that helps.
I'm working on a web page that has no mobile version. I want portable devices to show full, zoomed out version firstly. After reading few manuals I concluded that correct viewport meta tag should look like this:
<meta name="viewport" content="width=1200px">
Because I need a virtual viewport of width 1200px to show my webpage properly. However github(it has mobile version but it's possible to load desktop one on phones) and Youtrack has meta viewport tag like this:
<meta name="viewport" content="width=device-width">
Both options lead to the same result. How do you think, which solution fits web standards better?
I have the problem that my website is resizing correctly when I change the viewport in chrome or go to it directly on my phone.
It does work however when i just resize my browser window.
This is the website http://maxehlers.com/test/ if you would like to try it out.
Most stuff on the website is set up with percentages for with and height.
How can i make the website act responsively when accessing it from a mobile device? Do I have to add media queries?
I think you are missing the viewpoint meta tag
here are the docs on MDN
something like <meta name="viewport" content="width=device-width, initial-scale=1"> should sort it.
There is more good info here on css tricks on resposive tags
I'm making an app on PhoneGap using Jquery Mobile. The app runs fine on the PC browser and on the simulator, but when I install it on my phone everything is very small.
On my home page I have a listView that is searchable, and when I tap the textfield to search something the page adjusts to a more readable size.
How can I solve this? I want it to be readable from the start.
Add this in the <head> of your html:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
It will scale the page to fit your device size.
i am having an issue with most of my new sites which use H5BP when viewed from Windows Phone 7 (or 7.5). The problem is that this HTML tag in the site's source
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
which should actually support different mobile devices, prevents the user of a mobile device (in our case Windows Phone 7 or greater user) to zoom in on the text (and the site itself).
Using this tag the mobile browser will adjust the size of the site according to the mobile viewport (i.e. mobile screen width and height). However, the problem is, when the user tries to zoom in on the text using the zoom-in gesture, the zooming doesn't work. It tries to zoom in but quickly returns to the initial width.
Has anyone else noticed this problem and if so, what is the solution?
You may want to test adding user-scalable=yes to see how Windows Phone handles the tag.
Although the tag is supported by almost all mobile browsers it isn't a standard tag (originated on the iPhone) so the implementation may differ. I find that Safari has the best documentation on the tag and as such I sourced it below.
This tag should be worth testing:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
Source: Safari Documentation.
Additional resource: IE Mobile Viewport via Windows Phone Team.
I don't have a windows phone to test but perhaps adding the user-scalable=yes may help on windows mobile.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">