When I look at my page on an iPhone, I see the page in a zoomed out mode. This is fine, and all dimensions fit to each other of boxes etc.
But not the text. The text size is bigger compared to other sizes on this zoomed view.
This is ok for the text content on the page. Then it's easier to read the text on the phone, and the content text is not fixed but floats and fits to the container.
But the text on buttons as in the main menu on the page is also not reduced in size by the same percentage. And here there is a problem - the main menu bar is then suddenly to wide because everything else is shrunk more than this.
My menu's width is not fixed but fits to the text-width. So when the text-width suddenly is larger than usual, the menu bar is wider than usual too.
I can't give a screen shot, but I hope this is a known issue. As an example see this simulator (it seems to show the problem as on the iPhone):
http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php?u=http://w3schools.com#
And compare the normal site: http://w3schools.com/
This site also have this problem with e.g. the menu on the right on the page.
Mabye text-size-adjust can help you.
.css {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
This will allow your text to be smaller than the default value your phones browser allow.
Note: test it on a real phone since "There is a bug in Webkit-based desktop browsers. If -webkit-text-size-adjust is explicitely set to none, Webkit-based desktop browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page"
https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust
Related
At present, when a page is scrolled on Safari iOS 7 (11A4449D) the header chrome reduces in size and clicking anywhere in the bottom 44px of the viewport brings in the footer grey bar (with the next/prev page links etc).
Conversely, scrolling back up the page keeps the footer bar in place and the header bar at the larger size. Is there any meta-tag (or similar) in place to prevent this behaviour of make it consistent on both scroll-up and scroll-down?
We could work around the issue if the browser fired some JS event when the chrome came into/out of view but it doesn't.
Just as an update to this:
We eventually worked around this issue by using bottom: 0; instead of top: 100%; in the CSS. We had wanted to use top: 100% in the first instance as it meant that items being added into that element would be rendered down (off screen) automatically.
By taking the inverse approach we just have to manually translate the area off (using JS) an equal amount as the item being added.
This results in out 'sticky' footer staying above the bottom piece of OS chrome when that appears.
I'm working on a mobile version of a site and I'm emulating the iOS interface. There's a few places on the site where there's supporting background image sprites (chevron turns into loading gif / greyscale icon turns into colored icon).
It works flawlessly in desktop Safari, and is spotty on mobile Safari. The images will load sometimes, not others; the icons will load but the chevrons won't; they load on my iPhone but not my iPad and vice versa.
I'm getting no errors in the Debug Console. Here's the HTML and CSS:
CSS:
footer li a i {display:block; height:24px; width:24px; margin:0 auto;}
footer li a i.foo {background:url(../images/sprite-jobs.png) 0px 0px no-repeat;}
footer li a:hover i.foo {background:url(../images/sprite-jobs.png) 0px -24px no-repeat;}
HTML:
<li><i class="foo"></i>Text</li>
I have also found that if I quit Safari via the multi-task bar and restart the app all background images return, however simply clearing the cache has no affect.
I experienced a related issue yesterday - I have vertical menu in which the currently selected page's menu item has a background "blob" graphic to the left of it. This works fine on all browsers. I then added the same background image as a rollover to the menu, using "a:hover". This works fine on all browsers but mobile/iOS Safari. When I use the menu on the iPad the blob-graphic completely disappears at some seemingly random interval and never comes back unless I update the image and html files on the server. (Clearing the Safari cache has no effect).
This is my guess as to why it happens and how I solved it...
The :hover behaviour on touch-screen devices such as the iPad/iPhone is broken (because you can't really hover on a touchscreen). So the effect of using a hover seems to be that the browser believes the image associated with the hover is redundant and therefore doesn't cache it. However when a page featuring the hover-image is next loaded, the request to the server will detect that the image-file has not been altered, and thus deem it unnecessary to retrieve it (from the server), and therefore try to use the local cached copy which, I am presuming, doesn't exist (or at least not correctly). This causes the image to disappear (all copies of it on the page vanish).
Thus if you use the same physical image-file for the background of the hover-item and for the current-page menu image (or any other image on the page), both/all will effectively disappear when the browser decides to use its (non-existant) cached version.
One solution is to have two identical image files, and use one for the hovered-over menu-item, and the other one for anywhere else it's required. Then it doesn't matter if mobile-Safari discards the one associated with the hover (as there is no rollover-effect on those devices), but it won't effect the graphic associated with any other menu items (e.g. to mark the current page or whatever).
Can you let me know if that solves your problem? I couldn't find anything about this particular bug despite hours of searching.
It's probably not disappearing per se but sliding twice as far down the image as you intended on Retina displays, a la:
enhancing image quality for iphone 4 from 72ppi to 326ppi
Simple test: Double the image vertically and try again. You'll most likely see a 1/2 size version of what you intended appearing there, because of the iPhone 4's annoying way of handling background images.
The site I am currently working on (roemlunchdinner.nl) looks fine in all major browsers but Safari on the iPhone and the iPad seems to add extra margins or padding around elements on the lower part of the page. I have tried setting the margins and padding to zero on all relevant elements, setting specific widths etc. but to no avail. I cannot reproduce this is any other browser. Anyone here has an idea what is going on here?
I am new here so am not yet allowed to post screenshots. Here are the links to the screenshot I would have liked to post:
Safari Windows screenshot
Safari iPad screenshot
Mobile Safari resizes elements based on its best guess of what's going to be readable for the user.
You can override this behaviour across the entire site by doing this in your CSS:
body { -webkit-text-size-adjust: none; }
or you can target just individual elements.
try using media queries for ipad
#media only screen and (device-width: 768px) {
your css...
}
give different width and see. Hope this helps
add css to element or related class: padding:0 #important!;
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.
I have a mobile site which I'm testing on the iPhone, and unlike most other sites, I'm not able to hold my finger on the screen to get the 'copy' menu to appear (with the draggable handles to select an area to copy). Nothing happens at all on my site.
I've tried adding the following to my style sheet but it hasn't made any difference:
-webkit-user-select: text;
I should also state that I have the following also in my style sheet and within the page head:
-webkit-text-size-adjust: none;
I've got these as I didn't want the content to be scalable, and just wanted the content to span 100% of the device width.
Would the implementation of any of the above be causing the lack of selectable text on the site? Out of interest, I tried the flickr mobile website which also is not scalable and uses 100% of the device width like my site, and that also doesn't seem to come up with the draggable/select area for copying when you hold your finger on some text.
Does anyone have any idea why this is or how I can make the text content (or any content actually) selectable for copying/pasting?
Thanks
are there any elements that may be obscuring the items by overlaying them, etc? a z-indexing issue, perhaps?