I am developing an android app using JQM and PhoneGap . The app appears good in low end devices but the letters appear extremely small on high end tablets.I have tried modifying the viewport tag after browsing through so many sites.It would be very helpful if someone could give a resolution so that I can concentrate on functionality rather than the layout and resolution.
Use CSS media queries to configure font styles based on device resolution.
Example:
#media screen and (max-width:600px) and (max-height:963px) {
.fontClass {
font-size: 38px;
}
}
#media screen and (max-width:320px) and (max-height:568px) {
.fontClass {
font-size: 28px;
}
}
Related
I have an xcode project with html files. I am embedding a google doc using an iframe, but when I run the simulator, the width overflows on the right for iphone 6 and larger. It looks fine on iphone 5.
I've tried to change the margins in google docs and attempted some styling of the iframe.
iframe {
width: 100%;
display: block;
}
<iframe src="thesrc"></iframe>
I have also tried to embed it a container, but that didn't work either. I'm not sure if it's a css issue or I can't get a responsive iframe within xcode. Again, seems to be working fine on iphone 5.
If I understood your question correctly, I think you need to provide the correct media CSS rules. I don't know though if you can this in the external html of an iframe.
to perform media queries, you can do something like
#media screen and (min-width:500px) {
body {
margin: 0 auto;
width: 768px;
}
}
I have created a big cartel theme and successfully installed it. Media queries inside the code work correctly on my computer, however when I load the site on my iPhone, it appears at the original width – it should be taking into account the max-device-width: 480px. Any help solving this issue would be really appreciated, thanks in advance.
Make sure you include !important as this overrides all other code:
#media screen and (min-width: 767px) and (max-width: 1200px) {
.class {
font-size:1.2em !important;
color:#ffffff;
}
}
Like that.
I have a site I am building for a client and in need of a bit of help...Everything looks great in all browsers except for Safari and any Apply device.
If you take a look at the link below on Chrome or FF you will see the social icons on the top right look good, but when viewed on a Safari or Apple devices they stack on top of each other.
Would like to know what I could do to get this to be cross browser compatible....
http://msg.d1g.it
i am not quite sure why it doesnt work on safari, but why not apply float:left to the 4 <a> and give header_html a known width let it be 350px so something like this:
.social_btns { /* give all your <a> this class */
float:left;
}
.header_html {
display:inline-block;
float:right;
line-height: 30px;
padding-right: 10%;
width:350px; /* add this line */
}
tested on safari 7.0.3 with web inspector
I'm on an iPhone 5... I started updating my website, to use retina images. Everything works perfectly in Safari. For some reason, my background-image for the body isn't using it, and its super blurry. Any ideas? Is this a bug? This is what I have for the media query for retina displays:
body {
background:
url(../images/logo.png) no-repeat,
url(style/images/dark/bg5.jpg) 50% 0 no-repeat,
url(style/images/dark/bg5_repeater.png) repeat bottom;
background-attachment: fixed;
background-color:#09273e;
color:#e4e4e4;
background-position: 15px 10px, top, bottom;
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
body, #header {
background: url(../images/dark/bg5_repeater#2x.png) repeat;
background-size: 70px 70px;
}
}
Here is the link to the file and code line, on my bitbucket: http://bit.ly/Sxevfg
Here are some screenshots too between Safari and Chrome on iOS 7.1.1.
Thanks so much
Could be that the image was not saved as a progressive image. When saved as progressive, it fixes the issue.
Chrome renders pages with Safari's engine (the only browser engine Apple allows on iOS), so this must be a difference between in-app Safari (UIWebView) and actual Safari.
But my answer is that you should not be implementing a retina tax. Are double-resolution images really worth doubling the user's mobile data usage, or doubling your page's load time?
(If work on the Network Information API continues, maybe we'll get media queries for bandwidth...)
My jquery mobile page is WAY to zoomed out. I have tried everything I can think of, but I cant get it to zoom in.
This is the last thing I have been trying:
.ui-mobile-viewport {
max-height: 440px !important;
max-width: 500px;
}
How do you zoom in a page? I just want the page to fit normally on the phone
I believe you are looking for the viewport meta tag: http://davidbcalhoun.com/2010/viewport-metatag
EDIT:
Perhaps I don't fully understand the problem, but maybe you could try to fix it within the following CSS #media queries:
#media all and (orientation:portrait) {
/* set some widths maybe? */
}
#media all and (orientation:landscape) {
/* second verse same as the first */
}
Finally, if I'm still off base, do the answers here help? How to set viewport meta for iPhone that handles rotation properly?