I'm in the process of developping a Web Application for mobiles. I
went with web applications because to me it seems a winning situation
having to develop one application that could run also on iPhone /
Windows Mobile / Palm etc.
I started testing today after a few days of doing concepts, ideas and
designs and what I wanted to do was have a menu that sticks at the
bottom of the page. Exactly like the menu on the bottom in this iPhone
application screenshot :
Using CSS, I though it would be really easy to do this. Only using
position:fixed; bottom:0; would have done the trick but I have found
it doesn't behave the same on mobile browsers
I tried to split my page in 2 sections : 1 would be a scrollable div
(for the content) and the other one would be the bottom menu.
Scrollable divs also do not work on Android. I also tried using frames
with no luck either. Does anyone know of any way to re-create a menu
that would stick to the bottom of a page for mobile phones?
On my Android N1 with CyanogenMod i had this trouble too and the fix:
<meta
name="viewport"
content="width=100%,
initial-scale=1,
maximum-scale=1,
minimum-scale=1,
user-scalable=no"/>
Specifically the user-scalable=no; part, you can also put 0 instead of no.
Interestingly this breaks androids rendering of buttons, but all you have to do is set a background color to buttons.
Just add:
<meta name="viewport" content="width=device-width, user-scalable=no" />
to the page and you're set for Android 2.2+. This worked on a page I was testing on my phone. Source: When can I use CSS position:fixed?
This is supposed to work :)
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
Just got an upgrade to Android 2.2 (Froyo) on my HTC Desire, and I'm happy to say that position fixed now works, at least when you use the viewport meta tag to set initial-scale and width. Still doesn't seem to work on regular web pages though.
I confirm that using the meta name in your html header
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
you'll have a fixed div on scrolling vertical and horizontal on Android 2.2, 2.3 and up
and iOS 4 and up.
I made an example here:
https://dl.dropbox.com/u/908148/website/test-scroll.html
Related
everyone. I am writing a website and testing it on mobile devices. It is deployed here: http://vizio.distro.tv/web.html
When I rotate my phone to horizontal, sometimes the video becomes bigger than the screen, and I have to use my fingers to zoom in to make it fit the screen. Then when I rotate my phone to vertical, the video does not go back to its original position in the player container, it is bigger and goes beyond the screen. This problem is more common for "Live Channel" videos. However, when I test it on Chrome's developer tool (using its mobile device tool), everything works fine.
Can anyone help me find what the problem is? I can provide the code if needed.
Try adding this in the <head> tag?
<meta name="viewport" content="width=device-width, user-scalable=no">
Wrap your video player into a <div></div>
you can use the media queries of CSS to do that job for you.
CSS mostly does the job when it comes to webpage responsiveness.
Also media queries are partnered with this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I just started learning html/css/javascript and decided to throw together a website for practice. I now know that a lot of the approaches I took in creating this website are seen as bad practice, which is why I will not continue to do them. What i'm having issues with is getting the mobile layout I see on Firefox's mobile emulator to appear as is on an actual mobile device. Any advice on how to fix this issue?
Thanks in advance!
Website Files
Most modern browsers have some basal CSS-styling already: if you type in a <h1>sentence</h1> like this without the basic HTML elements, Chrome will still deliver the webpage.
I built a basic web-design framework like Bootstrap, and these three lines are critical in making a responsive webpage. Make sure to add them at the top of the <head></head>.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width">
The dropbox files wouldn't open, so I haven't seen your work. Try adding these and see if it works.
Try adding this meta tag to your pages, in the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
I had this issue with Bootstrap awhile ago and then found this nifty answer online. I also would recommend using something like Bootstrap or Materialize.
I have a blog website where I used the viewport property to scale the site in mobiles, it was working perfectly using:
<meta name="viewport" />
Then it stopped working for no reason, didn't touch the code at all. Now I've been trying with everything I find online, from max-width to initial-scale, etc. Still doesn't work.
What could be happening? Is there any update that cancelled the viewport property?
My website: www.fake-leather.com
If you are not coding a responsive site, just don’t use any meta viewport. If you are coding a responsive website, all you need to write is
<meta name="viewport" content="width=device-width, initial-scale=1">
Any additional parameters in the content attribute usually screw up user’s experience.
Reference: Stop using the viewport meta tag (until you know how to use it)
When I view my website on a mobile screen of iphone there is a white space on the right side of the screen and I can't figure out what is causing it. It seems to be only in the header section too.
Any suggestions?
Thanks.
URL
I see your site and i think that your site is work fine in browser but it create a problem with mobile your site is fully responsive and there not any white space in desktop resize but your media query not work in mobile so put this meta tag in your head tag and check again in mobile
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
try to add
margin:o;
if you post your code, i can provide you the accurate answer and one more thing not every one have IPhone lol :)
My website is built using HTML5 Boilerplate, and is being cropped on the iPad when the iPad is positioned vertically, but appears the way it's supposed to when the iPad is horizontal. Here's the link to the site I built: http://designedbyallison.com/hhsc/
Basically, the area that shows the website is being scaled down while the website design elements themselves appear to be the right size within the iPad display area.
I've tried to locate which lines of code in the CSS or JavaScript files control this aspect of the website but can't figure it out. I have even tried removing the JavaScript and CSS within the html file and the scaling issue is still apparent. Any help is appreciated.
You may find the <meta name="viewport" /> tag helpful.
I'd start with
<meta name="viewport" content="width=device-width; initial-scale=1.0" />