I want to make an HTML page that fit on any portable device and fill the screen and dynamically sizes its content. Also it should work on iPhone and Android. And the users should not be able to resize the page.
I have tried these ideas:
make the layout a with width 100% but still the user can zoom in/out
I have used DIV tags but it did not fill in the screen on the iPad but works well on the iPhone.
I hope you have a good idea to help me out.
If you have already tried using percentages and are unhappy with the results, I recommend you look into using CSS Media Queries. By determining the resolution your website is being viewed in, you can optimise it for each device specifically.
If you want to disable zooming for your website in mobile devices, make sure to add this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Related
The resulution width of the phone is 375px.
The phone shows a page of an app and it has a width of 980px.
This creates a zoom out effect making everything on the page smaller than it should be.
See screenshot from desktop-chrome with the iPhone 6 device turned on. It looks the same on the real device and on android etc.
Other pages work as expected.
Could be related to css.
I think you forgot to set your meta viewport tag (to this):
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I am experiencing some issues with a website I am trying to build. I did some research (like always) among this and other websites (as usual) and like never, I was not able to find a solution that worked for me. Please have patience with me since I am a beginner (developing for practice and learn purposes).
So here's the deal. I started building a website but I got stuck in making it responsive. After the research I was talking about earlier I used the
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
It works as long as I am accesing the website throught the Chrome Browser for Android. It also works in Chrome for Windows when I select the mobile view or resize the window. The only browser that acts like skipping that meta line is the stock Samsung Browser (WebKit - it think, though not sure about the name).
Is there anyone that experiences the same thing? I was thinking is only my phone (Galaxy S2) but it seems that I am not the only one with this issue.
Thanks in advance and looking forword for a solution.
LATER EDIT
Worked around with the values. Seems like the <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes, target-densitydpi=device-dpi"> is actually not ignored.
I played around with the max zoom values and it seems to work. The only issue now is that the stock android browser does not display the page acording to the #media screen and (max-width: 640px) present in the stylesheet file...
LATER (FINAL) EDIT
The css code was somehow faulty. Deleted the multiple screen resolution support and worked around only with the normal web view, then added support only for one resolution (#media screen and (max-width: 500px)) seemed to work (anyway, there are just a few devices out there that has width lower than 500). Now in regular view, the site successfully shows the content according to the CSS file. Shrinking the resolution will also display the page in a correct manner. I also noticed, that using "max-width" should be done in ascending order (first deal with high resolutions resolutions first).
I've read a few of the related StackOverflow questions:
here, here and here,
but I feel like I am still without an answer.
I have a great responsive design (very simple), that looks great however you re-size the browser on desktop. Now when I inspect the element via Chrome and use their phone preview, everything is so small and tiny. The background doesn't stretch like it does on desktop. The main content doesn't fill the area like it does in the desktop, even when the browser is re-sized to be the same resolution as a phone's.
Yes, I've included the viewport specifications.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Honestly, no matter how much I play with the width, it doesn't seem to change anything - in the desktop browser, or on mobile.
Why does a webpage look completely different in a phone's browser than it does in desktop with the browser shrunk to the exact same resolution?
Maybe the user-scalable=0 instead of no?
content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0"
I have a webapp with fixed width layout at 1280px.
I need to adapt this webapp for mobile.
Basically I need to fill the whole device screen width with 1280px by scaling acordingly.
I managed to do this by using viewport meta tag with fixed width.
<meta name="viewport" content="width=1280, user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>
It works great in mobile chrome browser.
Now I need to wrap this webapp inside mobile app.
I picked Phonegap, but as it turned out it won't work as good as chrome browser did.
It doesn't do any scaling, everything is huge.
How can I get it to work? Is it even possible with phonegap to scale fixed layout accordingly in order to fill the screen, without breaking the layout? Or maybe there's any better alternative to phonegap?
What i understand, you have a fixed width, so thats the problem.
1280 is also a lot :)
I suggest that you build your site with a responsive framework eg. http://jquerymobile.com/
I always use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I'm trying to design a web form that can be easily viewed/used on computers as well as smartphones. I created a floating layout that resizes from 1000px down to 300px along with the browser window. It works fine on a computer, and from what I've been told on an iPhone. But when a user pulls it up on Android, Android simply zooms way out to view the entire 1000px page, rather than "collapsing" it to the "narrow" mode.
[link no longer active]
Do I have to use some type of browser detection to do this? Or is there a way to get Android to work like a really narrow computer web browser window?
Does your meta viewport have anything for dpi?
<meta content="width=device-width, target-densityDpi=device-dpi" name="viewport">