Is there anyway to apply this method from Chris Coyier to mobile phones: http://css-tricks.com/full-browser-width-bars/
I applied
html {overflow-x: hidden;}
To get rid of the horizontal scrollbar, but when viewing on an iphone for instance. There is a horizontal scrollbar.
You can view the site here: http://www.revival.tv/turningpoint/
Try adding <meta name="viewport" content="width=device-width" /> within the head tag of your page.
Try adding it to the body tag, too.
body {overflow-x: hidden;}
Find the the thing that's causing the scrollbar and get rid of it. Hiding overflow-x seems a bit of a sticking plaster to me - if you do it right in the first place you shouldn't need this. Using media queries allow you to set the width of the page at difference screen sizes. This means you can pretty much wrap you content in div and set its width at the different screen sizes
I am finding that the initial-scale attribute is crashing Safari for a web page that contains an embedded Google Map. http://w.pat.tc
Use this code
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Thats usefull for my moblie web http://www.sepatuonline-murah.com
Related
Is there a way to disable zoom on a div, or any particular elements on a website? For example, if I wanted the page to be zoomable, but not the #Header div, is there a way to make one zoomable, and the other not zoomable?
Basically, when you zoom on a mobile device, it zooms the Header too, but I want the header to be a fixed size at all times (not zoomable).
I know that you can use this code to disable zooming overall:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
You can't do that without clever hacks.
However, you can (and should) use the following CSS to fix zoom issues on mobile devices:
header {
position: fixed;
...
}
#media only screen and (max-width: 720px) {
header {
position: absolute;
}
}
This code enables position: absolute when display width is less or equal 720px, and header becomes the part of the page, rather than being fixed on top.
I don't think you can do that directly. One possible option would be to detect the zooming through js events and scale elements accordingly.
Another option would be to "break" the CTRL key to disable zooming on your website, but that's just a big no-no.
In shorter, you certainly can do that.
You can trap window resize events and resize your floating div according to the dpi change calculated from the various new window and inner width and height attributes.
So, when you zoom in, you want to shrink the floating div so it retains the original dpi, and vice versa.
This would be an epic fiddle - revisit this answer soon, since I may have to do such a thing. Already noticing some cross-browser inconsistencies with dpi, so yeah, fun.
Faced the same problem an ended up disabling panning/zooming
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
and selectively reenable it with this great lib
https://soulfresh.github.io/pan-z/?path=/docs/pan-z--pan-z
Works great without much configuration.
My html-structure is as follows
<body>
<header>Sticky unzoomed header</header>
<main id='main'>Zoomable content</main>
</body>
Then I enabled panzooming on the main element
const PanZ = require('#thesoulfresh/pan-z')
new PanZ().init(document.getElementById('main'))
If you are using angular there is a way to give one id to your header div and then write the following code in controller:
document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');
I used in my project and it worked well..
I'm serving a page for phones and tablets. I am using OpenX to serve advertising on there. The advertising should be loaded in an iframe which should be the width of the page. I'm using bootstrap.
I tested things with this code:
<iframe src='http://www.cnn.com' width=100% height=120px scrolling='no'></iframe>
This makes an iframe that's the exact same width as the browser window. Problem is that if I open this on an iphone it will rescale the iframe to the size of the window loaded in it, and that's very unwanted behaviour. It doesn't do it on my desktop, only on the iphone. I haven't tested yet with other smartphones.
Basically what I'm looking for is an iframe that is the same width as the screen (100%) and doesn't rescale when I load a bigger page in it
I'm pretty sure you are looking for the viewport meta tag to control this. Here is a reference that will explain it completely: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Basically you want to drop this code into your head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This is how the site I'm putting together should look:
GB Personal Training
This is what it looks like on the iPhone:
iPhone Browser
As you can see it pushes in the #wrap and #outer-wrap DIVs, so that the background images in them have a right margin and I don't know why. I only have access to the custom.css file and not the HTML.
I'm currently editing a clone of it at:
gbptclone.live.subhub.com/
Define max-width in your body. Write like this:
body {
min-width: 1000px;
}
add this inside your HTMLhead:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Actually this will prevent the user to zoom the content (wich sucks, from an user end experience):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Instead, in my opinion (and I am no guru), you should use:
<meta name="viewport" content="width=1000px">
Try setting a width for #outer_wrap and #wrap (you probably want 100%).
It looks like Mobile Safari is expanding the size of the #visual-portal-wrapper div, which isn't enough because Safari resizes text for iPhone display. You can change this with -webkit-text-size-adjust: none; but that would make the links rather undersized for iPhone users. That's why it fits in a normal browser but not in Mobile Safari.
Changing the width of the divs should stop them from having content expand beyond their edges (they're 974px by default because that's what #visual-portal-wrapper is, but all the contents overflow and cause the visual errors) and have the background images appear cut off. You might also want to add background positioning for #outer_wrap since it appears slightly off on the screenshot from what I'm seeing in Firefox.
Edit: Alternatively, you could try changing the width: 974px; on the #visual-portal-wrapper div to min-width: 974px;, of course making sure you account for IE's problems with min-width).
I'm editing our News site's mobile CSS file. On the iPhone 3gs, 4 & simulator there are some pages (not all) there is an extra right margin.
Here's an example of a page WITH the extra margin:
http://bit.ly/mMA2q7
..and here's an example of a page without it:
http://bit.ly/iQeOGY
Both pages are using the same template. I'm guessing the images are adding the extra margin.
Here is our mobile CSS file http://bit.ly/iW5JVm and viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1;"/>
I tried applying different min-width values to the body but haven't found a solution.
Do you know how to get rid of this extra margin on the iPhone?
your photobanner div is too wide. It gets set to 500px which is way too much :)
try to add width:auto!important to it :)
Same problem, I fixed it adding this code in header:
<meta name="viewport" content="width=1100" />
Anyone know why I still have some extra white space to the right of my web site when using an iPhone?:
(please check on an iPhone - this will not show with Firefox/UA Switcher)
I've adjusted viewport meta to "device-width" and my body's width is 100%.
I've Firebugged everywhere and just can't figure this one out.
You must set the width with "device-width" like this :
<meta name="viewport" content="width=device-width;" />
Try to wrap all your page content in DIV with just overflow:hidden style (no more styles necessary).