I'm in the process of building a web site that needs to be viewable on mobile devices. When viewing it in safari on an iphone 4s it looks great. If I view it chrome on the same device none of the styles for the navigation list show up. It ends up looking like basic html links. The links in question are, Va Leadership, Nursing, and Anesthesiology staff
Bellow is a link to the live dev site, as well as the CSS.
link: http://xeroproject.com/sqwm/category/resources/
CSS:
#leftNav{
max-width:402px;
}
#leftNav ul li a {
list-style-type: none !important;
width:100%;
text-decoration:none;
font-weight:bold;
font-size:24px;
color:#FFF;
}
#leftNav ul a:hover {
color:#85b6ce;
}
#leftNav ul li:nth-child(odd){
padding:10px;
margin-bottom:5px;
background: #0b5a42 url('images/arrow_dark.jpg') no-repeat right;
}
#leftNav ul li:nth-child(even){
padding:10px;
margin-bottom:5px;
background: #688879 url('images/arrow_light.jpg') no-repeat right;
}
The site renders fine for me using Google Chrome for iOS Latest on my iPhone 4s (at least it looks exactly the same as it does on Safari running on the same phone).
Try clearing Chrome's cache.
If that doesn't help, connect your iphone to Fiddler2, and see what requests are being made by your site, and see if the style-sheet request is erroring out.
Related
Hi I am trying to built a page with html/css and javascript.
Everything seem to work when I test in on windows browser but it won't load the images on iphone.
I tried several iphones with no luck. I tried Safari and Chrome. I followed all the instructions for settings but nothing. It doesn't even recognise that there is an image in the code.
I found out that in css : *, *:after, *:before{ content:""; } created the issue. Any way around it ? I messes up with all my layout if I delete this line.
Found out, instead of writing:
*, *:after, *:before{
content:"";
clear:both;
display:block;
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'Sulphur Point', sans-serif;
}
I separated
*:after, *:before{
content:"";
}
and added
*,*:after, *:before{
clear:both;
display:block;
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'Sulphur Point', sans-serif;
}
Images now appear in iphones as well.
I am working on a share button on facebook. I want it to display a custom message in the description of the content sharing but I am unable to do so. Below is the code that I am working on,
<script>function fbs_click() {
u=location.href;t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<style> html .fb_share_button {
display: -moz-inline-block;
display:inline-block;
padding:1px 20px 0 5px;
height:15px;
border:1px solid #d8dfea;
background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right;
}
html .fb_share_button:hover {
color:#fff;
border-color:#295582;
background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right;
text-decoration:none;
}
</style> <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;www.adsterr.com>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>
Please help me out with the values of u,t and other parameters so I can make it work. Thanks
The facebook share button has been deprecated, you can read it here: http://developers.facebook.com/docs/share/
The Share button has been deprecated in favor of the Like button, and
will no longer be supported. Please use the Like button whenever
possible to drive maximum traffic to your apps.
Instead of that you can either use one of the social plugins:
https://developers.facebook.com/docs/plugins/ (such as the Like Button, Send Button or the Like Box) or open the facebook dialogs yourself using the facebook javascript sdk: http://developers.facebook.com/docs/reference/javascript/FB.ui/
When I view www.americaspoeticsoul.com on my iPhone, the menu overflows for some reason. See:
And it even looks worst on the other pages because of the title:
Anyone know why it's like this? And is there a way to fix it? Here's the CSS for the menu:
/*Menu*/
#menu {
margin-bottom:15px;
width:450px;
}
#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
float:left;
}
#menu ul li a {
display:block;
padding:10px;
margin:2px;
background-color:#D41C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#menu ul li a:hover {
display:block;
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#menu ul li a.current_link {
display:block;
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Thanks,
Nathan
As an iPhone user and developer - I wouldn't use a site like yours on the phone unless I really had to - it would require all sorts of zooming in before I could read or click on that menu.
If you have content that you would like to present via a menu on an iPhone, I would recommend detecting small-screen mobile browsers and redirecting them to a mobile specific menu at the very least - jQuery Mobile is so easy to use to create a menu.
This is just a response about iPhone or similar size screens - I'm sure you'd want to fix this on an iPad if it looks the same.
You're not setting an explicit width on the menu items which leaves their width at the mercy of the browser and how large the font-size + margins and padding end up being. In the case of mobile browsers (Android too), your width is just too much for the 450px that you have. Try dropping the font size a point or something.
You're discovering one of the downsides of relying on text/fonts within your menu system. There is way too much variability (OS, browser, device, etc.) to expect the text to always behave properly or even use the font you intended.
I use a graphically created menu system which never changes no matter what and a simple text menu in the footer as a fallback.
You could try adding this to your CSS file:
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
This will stop Mobile Safari (and Windows Phone) from adjusting the size of your text in an attempt to make it more readable.
EDIT: If you only want to affect the text-size-adjust on mobile phones, you could use a media query:
#media screen and (max-device-width: 480px) {
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}
If you're feeling ambitious, you should consider adjusting the layout on a more fundamental level for smaller screen sizes. Any CSS you put inside that media query will get applied to devices that have a screen size of 480px or less.
For example, the buttons may be a bit too small for fingers to reliably tap on them. A better alternative would be to linearize the layout so that there's only one column and each link button takes up the full width of the screen.
Im currently working on a mobile version of a website, everything is great, works fine on an iPhone, Blackberry and Android.
I have one slight problem, not a big deal but still a little annoying. I have:
<h1> tags set to 18px and bold
<h2> tags set to 12px and bold
<p> tags set to 12px and normal
Now everything looks great on the iPhone when viewing in portrait, but when the device is rotated to landscape the <h1> titles go smaller (hard to tell but possibly smaller than the <h2> tags?!
Here is my css:
h1 {
color:#FFFFFF;
font-size:18px;
line-height:22px;
font-weight:bold;
margin-top:0px;
}
h2 {
font-size:12px;
color:#333333;
font-weight:bold;
margin-bottom:-5px;
}
p {
color:#333333;
font-size:12px;
line-height:18px;
font-weight:normal;
}
I believe you are looking for this in your CSS:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
A better solution can be using 100% instead of none, as stated by user612626 in an older thread:
Font size rendering inconsistencies on an iPhone
body {
-webkit-text-size-adjust: 100%;
}
this way desktop webkit browsers can adjust size and zoom proportionally too.
I think this is a better approach than filtering by screen size.
Hope it helps.
As stated in Neurofluxation's answer you can use the css rule -webkit-text-size-adjust but beware that this can prevent users from adjusting the font size on desktop Webkit as well (see this article for more details).
In light of this it's likely worth checking via CSS3 media queries (or user agent) to be safe.
E.g.,
#media only screen and (max-device-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}
I have a facebook iframe application with share functionality. Currently when i share something its showing the custom text Comment · Like· Share when posted on profile page.
I want to give customized text like view result etc.
How can i achieve this please guide me ?
I am using the code
<script>function fbs_click() {u='<?php echo $shareURL;?>';t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://b.static.ak.fbcdn.net/rsrc.php/z … 8q506x.gif) no-repeat top right; } html .fb_share_button:hover { color:#b5b8d3; border-color:#295582; background:#3b5998 url(http://b.static.ak.fbcdn.net/rsrc.php/z … 8q506x.gif) no-repeat top right; text-decoration:none; } </style> Share
Thanks
If you're using Facebook's dialogs you can specify custom action links with your posts, but if you're using the old sharer.php this isn't possible.