Probably a basic question to the experts in this
Example:
I have image 2000x1500px # 556kb - a set of pictures of that size causes iOS devices to not load the page (considering there are many pictures) due to cache levels I'm guessing.
If I create two of the same files one at 2000x1500 and other at 800x450 with a much lower weight due to smaller dimension - which would be intended for mobile devices only.
How would I address that in CSS or whatever is the right method to go about this?
If you can determine what image sizes to use for mobile/tablet/desktop/extraneous cases then you can use javascript or CSS media queries to accomplish replacing the images on the fly.
For instance say you know all your mobile devices will trigger at window width 768px and that it is safe to assume an image size less than 500kb will be good for all these devices, then CSS is your solution:
HTML
<img class="mobile_image" src="mobile_image.png" alt="Mobile Image"/>
<img class="desktop_image" src="desktop_image.png" alt="Desktop Image"/>
CSS
#media (max-width: 768px) {
.desktop_image { display: none; }
.mobile_image { display: block; }
}
Note: Media Queries for standard devices
If you need something more sophisticated, due to identifying which device is being targeted, you can also couple the above CSS with Javascript for image detection.
Look here: What is the best way to detect a mobile device in jQuery?
You could use srcset attribute
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
image-3x.png 3x, image-4x.png 4x">
Nice demo can be seen here and more details here
To see which browsers support this attribute see here, firefox 38+, chrome 39+, safari 7.1+, opera 29+, ios safari 8.3+ ...
The src and srcset attributes on the img element can be used, using the x descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).
Browsers can then use this information to pick the best image source.
Other option is to use <picture> tag and srcset attribute together.
The picture element gives developers control when those images are presented to the user.
<picture>
<source media="(min-width: 20em)"
srcset="image-big.jpg 1x, image-big-hi-res.jpg 2x">
<source srcset="image-small.jpg 1x, image-small-hi-res.jpg 2x">
<img src="fallback-image.jpg" alt="No support for picture tag">
</picture>
Related
I've created a simple application using Phonegap for android, that simply loads my website's content. The problem is webview doesn't understand the "REM" css units, even though on the same device when I open the website in chrome browser it works as expected.
The technique I'm using is I set the root font-size in pixels (for example 1px), and everything else using rem units. It looks like when using webview, it has some minimum value for font-size which is far bigger than my value and it multiply all elements sizes by 10-12 times.
Is there a way to fix it without switching to pixels instead of rems?
Code example:
body {
font-size: 1px;
}
.element {
width: 15rem;
}
From the code above, the width of the element should be 15px, which is correct if I open the website in mobile browser, but in webview its bigger than 150px;
UPDATE:
I'm almost sure that it has a minimum font-size issue in webview, because I tried the opposite now, I set the root font-size to 15px and .element width to 1rem and it shows everything correctly, means REM units are working if I set root font-size above the minimum limit in webview.
Here is how my website looks in mobile chrome
[]
Here is phonegap application
Webview increases the minimum font-size by default. This solution works the best for me. Now webview acts like most other browsers with rem units. :)
https://stackoverflow.com/a/41496408/688352
I am mid-way through re-coding my current site and I have come across a mobile compatibility problem.
If you view the current website via mobile device (here) you can see the width and height of the website is normal sized as it would be when viewing on a desktop with the ability to scroll vertically and horizontally.
However, on my new site (using bootstrap slate from bootswatch - bootswatch.com/slate/) when you preview it on a mobile device it tries to squeeze it all into the fixed mobile device width (here)
I have tried adding the lines below, however I don't see a difference.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
html,
body {
height: 100%;
width: 100%;
}
Is there any way to make the new site to be shown in the same dimension as the current one in mobile devices?
Thanks.
What you see is the responsive behavior of bootstrap I guess. And imho it definitely makes sense to fit the content into the device width on mobile devices.
You can read about disabling the responsive feature in your bootstrap project here: Disabling bootstrap responsiveness
UPDATE:
To make your content horizontally scrollable add:
html, body {
overflow: auto;
}
to your stylesheet.
If this doesn't work try adding !importantto the declaration:
html, body {
overflow: auto !important;
}
NOTE:
This is not the most efficient way css-performance wise, but given your comprehension level of CSS, I guess it would be too much for your to alter the bootstrap.css yourself.
For Bootstrap it self the steps on disabling responsiveness are below. You can download template/CSS with this disabled. Check out http://getbootstrap.com/getting-started/
Steps to disable page responsiveness
Omit the viewport mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.
I am trying to design a site that is easily accessible from tablets, smart phones, and desktops, and is equally usable from any device.
After a bit of reading, I found mixed numbers for the iPhone 4 resolution, which is 620px - 760px.
I am aware of using the following CSS to detect the type of media. However, the following CSS is not applied on my iPhone 4.
//detect smart phone
#media screen and (min-width:1px) and (max-width:780px) {
.inner-main-header{border:2px solid brown;}
}
Any ideas why this is? any suggestions what I can do in this case? my goal is to simply use one particular CSS for tablets and another for smart phones.
I appreciate any suggestions.
Many thanks in advance!
I believe it'd be min-device-width and max-device-width. Also, your pixels look a bit off:
//detect smart phone
#media screen and (max-device-width:640px) {
.inner-main-header{border:2px solid brown;}
}
//detect tablets
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
.inner-main-header{border:2px solid black;} //changed to black just to see difference
}
honestly I would use a site like this to redirect users to appropriate subdomains with their own respective css. If you opt not to do such a thing, I would suggest just using css to scale all the media based on screen size using values such as max-width: 100% and width:auto\9. Another good tutorial would be this youtube video good luck!
I will be running my GWT generated Java script file on android and I am trying to get my UI to look the same regardless of the size of the mobile screen. Most of my views have 5 to 6 widgets , buttons, Textboxes mostly. I have put them in a FlexTable for now but maybe there is a better way to lay out the widgets?
My main question however is about how to use CSS to layout my widgets so the look and feel is the same across all screen sizes. Is this possible to do using CSS? If so would anyone have any CSS examples that focus on widget positioning?
For GWT on various screen sizes (and to handle landscape, portrait rotation) I use media queries. In this way you can define css rules for each screen size.
For example in the following below I never need myContentPanel to be larger than 450, but that is too large for iPhone/Android portrait views:
#media all and (max-width: 10024px) {
/*styles for narrow desktop browsers and iPad landscape */
.myContentPanel{
width: 450;
}
}
#media all and (max-width: 320px) {
/*styles for iPhone/Android portrait*/
.myContentPanel {
width: 320;
}
}
Here is a more complete css example http://snipplr.com/view/67341/
There is a great tutorial using jQuery here http://css-tricks.com/resolution-specific-stylesheets/
You can see more here at:
http://css-tricks.com/css-media-queries/
You can use ViewPort Meta tag to maintain proper widths and heights for your web applications on mobile devices too.. with out changing all the layouts .
The viewport meta tag to control layout on mobile browsers.
See the below question also ,which I already answered to set the viewport .
Achieving min-width with viewport meta tag
And also have a look at #media tag as user1258245 said
I have a project that is displaying 16px text font at 0.5ems links on the iPhone perfectly fine.
However, when I switch to an Android browser, the text font enlarges itself and my positioning of the links are screwed.
My links are in a
<p><a>[Link]</a></p>
statement.
Is there any way to prevent the Android text from resizing itself? Or is there a better solution to this?
EDIT:
I just realised the android browser doesn't allow for auto scrolling as well. Why is this so? Aren't both the iPhone and Android browsers using webkits as its base? Why are they so different even though they use the same technology? Are there any extra attributes i should declare in CSS for it to work the same as the Safari counterpart?
I had a similar problem as well. I had a design that was designed specifically for the Retina display, but the retina display actually has a pixel density of 2, so a pixel isn't necessarily a pixel (non retina iphone pixel width: 320px, retina: 640px).
To fix that, I put this in the <head>: <meta name='viewport' content='width=device-width, initial-scale=.5, maximum-scale=.5'> so that a normal phone will scale as I expect, and the retina display would scale appropriately (half scale).
I'm not sure what kind of design you're using, but I'd play around with the initial-scale and maximum-scale, try both .5 and 1 and see what you get.
If you use pixels (px), it is related to the screen pixel density. An iPhone "retina" display would show text differently to your Android device.
This article covers the topic pretty well: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
I found a setting that might help in another question, Font size rendering inconsistencies on an iPhone:
body {
-webkit-text-size-adjust: 100%;
}
An alternate value is described in another question, Font size issue with iPhone:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Seems like one of these might prevent the android browser from resizing. Hope this helps.
If you want to stop Android from auto-scaling your pixel values, you can try adding this to your viewport meta:
target-densitydpi=device-dpi
Here's a good reference on the same:
http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui