I'm building up a website using fullpage.js. When zoomed 100%, the webpage looks great, yet, when zooming just 25% more, texts and imgs will start overlapping or even disappearing, as each section has very limited height (with no scrolling), making my webpage impossible to read. I'm using
em
unit for font sizes and percentages for sizes, imgs and margins (except if its too little margin (5px, for example), where I use
px
). Hence, I was wondering if there's a solution using Javascript, CSS or HTML which can maintain font size even if the webpage is zoomed. As of now, I've tried, with no success, the following:
document.body.style.zoom="100%"
-webkit-text-size-adjust: none;
Using fullpage's feature resize, but it only works if the user resizes the window once the page has loaded.
document.body.style.webkitTransform = 'scale(1)'
My website is (sorry, I don't know which part of it to post, as the issue involves all of it):
http://rienpipe.es
Thanks in advanced!
you can fix this by using #media query's and a viewport in your css , and add this meta tag to your html:
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>
and with the #media query's and viewport you declare what size you have per screen width using this media query + viewport in css:
#media screen and (min-width: 820px) and (max-width: 920px) {
#viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, #media screen and (min-width: 1200px){ #viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}
So this means you will have 6 times your css code which is adapted will be adapted to the size.
This is called adaptive or responsive design and is pretty easy to do
For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Related
I have a problem, I have container populated with header, main and footer. On the front page for example for desktop users header should be 12% of available browser height and main should be 88%(without the browser toolbar and windows/android/ios/linux bars), footer should be only visible when user scroll the page.
I considered these solutions:
header {
height: 12vh;
}
main {
height: 88vh;
}
but header and main shouldn't resize when user resize browser height.
let root = document.documentElement;
root.style.setProperty("--deviceHeight",
window.screen.availHeight - (window.outerHeight - window.innerHeight) + "px");
but when user change browser height and refresh the page - --deviceHeight is calculated once more.
I tried also:
root.style.setProperty("--deviceHeight", window.screen.availHeight)
but then output is different for chrome, opera and other browsers.
To conclude - I want to get max available height without windows and browser bars and resize header and main to that height, so then header height + main height would be 100% of max available browser (inner?) height, but when user resize browser on desktop -> header and main height shouldn't change.
Is this possible in css without multiple media queries? If not, is this possible in javascript / js + jquery?
Or mayble should I use multiple jquery (for example iteration by 10 in media queries)
:root {
--deviceHeight: 299px
}
#media only screen and (min-width 300px) {
:root {
--deviceHeight = 300px
}
}
#media only screen and (min-width: 301px) {
:root {
--deviceHeight = 302px;
}
}
etc.
I'm looking for best solution for front end programming and SEO, any advise, even if complicated, will be great!
You said that the header's size shouldn't change when browser's height is changing , so you can use a fixed unit and calculate the rest for your mainf content :
header {
height: 300px; // for exemple
}
main {
height: calc( 100vh - 300px ); // calculate the available space
}
I found a solution, not necessary what i wanted, but it is closest to what i desired.
header {
height: 160px;
}
#media only screen and (max-height: 599px) {
main {
height: calc(599px - 160px);
}
}
#media only screen and (min-height: 600px) {
main {
height: calc(100vh - 160px);
}
}
Depending to the topic I wanted also point out this:
get full height without toolbar:
window.outerHeight
which results in:
Check out dmitripavlutin for a nice graphical illustration of the window attributes
Depending on your needs you can adapt to window inner sizes, outer sizes, screen available sizes and so on.
Browser compability regarding to mozilla docs:
I wanted to mention this here, because sometimes I feel like a complete noob and would be happy to find this input at first glance instead of wasting time creating complex mathematical solutions calculating these things^^
We know that there are different ways we can change the width(or any properties) of the element using the #media queries
We can use Aspect pixel ratio, device width and height.
https://developer.mozilla.org/en-US/docs/Web/CSS/#media
Requirement : We have to maintain the same physical width of the element accross platorms, In Mobile,desktop, or any of the DPI element should looks same.
I tried using em, vw,%, no luck.
If i used all these the physical look of the element will very from one devioce to another.
Some of the device it looks small, some devices it's big.
Can anyone please suggest me how we can achieve this.
Maybe you can try with vmin and vmax, those are based in the vh and vw, but you can manage to maintain a very good aspect ratio with those measures. I often use vmin for the more specific measures, as font sizes, image sizes and that. I'd recomend you to use vmax to achive other kind of measures, as containers and so. I also use CSS variables to take an adventage of this things and scale down several things in the media querys, also, with vmin and vmax, I can skip several medias.
As an example, here you have a little font size snipet
:root
{
--text-size: 2.1vmin;
}
.px
{
font-size: 16px;
}
.vmin
{
font-size: var(--text-size);
}
#media only screen and (max-width: 700px)
{
:root
{
--text-size: 3.5vmin;
}
.px
{
font-size: 12px;
}
}
<p class='px'>Here is the example text with px</p>
<p class='vmin'>Here is the example text with vmin</p>
For Desktop with browsers chrome >= 28, safari >=9 IE>=12 opera >=14
use below media query.
#supports (-webkit-appearance:none)
You can use below media query that fits for any mobile device for
portrait mode.
#media (max-width:720px) and (orientation:portrait)
Also, at the same time if you want mobile responsive in landscape mode
that too you can fix the issue using below media query.
#media only screen and (orientation:landscape)
and (min-device-width: 319px)
and (max-device-width: 1024px)
In most of the cases there is responsiveness issues in internet explorer,
you can use below media query.
#media screen and (min-width:0\0)
I myself have tested these media queries mentioned above, feel free to let me know incase any queries.
Hope my solution helps you out!!!!!!!!!!!
I hope it was not a misunderstanding, but you want the element to have an element with an unchanged size in real life measurement no matter the device used? Like an online ruler?
If so, have you tried to use centimeters (cm) instead of pixels or percents? It seems that browsers support this unit, but I don't have a measurement tool to test its real size. The CSS measurement units are well explained on W3.
<div id="cm"></div>
#cm {
position: relative;
margin: 0 auto;
height: 8cm;
border: 2px dashed red;
width: 10cm;
}
Here is a code that might help: https://codepen.io/ialexandru/pen/oNgMvXR
I'm using Joomla 3.3.4 FYI.
I have an image on the front page (http://www.ckdev.info/cdp) that's a call to action to complete a form for a free estimate. It's great in desktop or tablet (landscape) as the form appears to the right.
However, when viewed on other devices or orientations, the viewport is too small to have the sidebar showing on the right and it drops to the bottom. So the "right arrow" image doesn't make logical sense.
What I want to do is a bit of an "if-else" solution. If screen width is xx px or greater show "right-arrow.jpg", else "down-arrow.jpg". I will attach a anchor to the form so that clicking/touching down-arrow.jpg when displayed will scroll down to the form.
I'm afraid I'm no coder so, while I have no doubt this can be done, I have no clue how! Thanks.
You can do it with css media-queries.
Try this: (change 900px and 899px to your desired values)
#media(min-width: 900px) {
#img {
width: 100%;
height: 150px;
background: url('http://www.ckdev.info/cdp/images/estimate.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
#media(max-width: 899px) {
#img {
width: 100%;
height: 100px;
background: url('http://www.ckdev.info/cdp/images/estimate.png');/*change image url*/
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
Check it out here: jsFiddle (resize result window width to more than 900px)
I've just made your image different size on different media queries, but instead change your background url to your desired image.
You can make this happen using jQuery without anything extra as long as you don't mind some odities in the width of the window that come from the scrollbar. Ill get back to the scrollbar in a sec. To test the width you can use jQuery(window).width(). This will return the width of the window in pixels. Exactly what you are looking for. An example snippet:
jQuery(document).ready(function(){
if (jQuery(window).width() > 1000){
jQuery(<select img here>).attr('src', '/path/to/new/image.jpg');
}
});
I notice that you dont have a class or id on the image you mentioned. I would suggest adding an id to make it easier to select. For example, <img src="/cdp/images/estimate.png" alt="Get a free interior or exterior painting estimate" id="estimate-with-arrow">. If you make this change you can swap out <select img here> for 'img#estimate-with-arrow' (this will select an the image with id estimate-with-arrow). And voila, image swap.
I will note three things.
First, that this will only work on initial page load. If a user loads the page at full desktop width then shrinks it down, the image will not change when it passes the break point. You need to bind to the resize to get this to work:
jQuery(window).resize(function() {
<code here>
});
Second, I set up this particular code to swap out the image for any screen over 1000 px. This means you will only ever load one image for smaller devices, saving bandwidth. This is preferred, ad mobile plans are more finicky.
And third, the scrollbar. Testing the window width using jQuery will not match the same break point as css. I use modernizr to get around this. This is a bit more advanced though.
What you want is a CSS media query to change the displayed image.
For a smartphone like the iphone in portait it would be something like that:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)
{ /* STYLES GO HERE */}
For more details take a look at:
w3schools
cssmediaqueries
I have a design built at the correct width of 640px. I want to set the pixel ratio so that I can write 10px when I mean 10px of a 640px width. I don't want to try to divide every value in half. Is this possible? Something like, initial-scale=0.5, maximum-scale=0.5?
Thanks!
This can be done with the use of a media query within your CSS
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* iphone 4 Styles */
}
In my CSS I have code like this:
html {
background:blue;
}
#media screen and (max-width: 980px)
html {
background:red;
}
So when the browser window is less than 980px, background turns red, the rest of the time, it is blue.
I resized my window to 970px (according to CSS) and the background is red. But when I use jquery to do a alert($(window).width()), which gave me a pop up saying 1000px
Why would $(window).width() reporting a larger value than what CSS expects?
I believe there's a difference between the visible page and the window size. In vanilla JS, so far as I understand:
window.innerWidth, window.innerHeight
(the page's visible width/height)
window.outerWidth, window.outerHeight
(the browser outer width/height)
It strikes me that this is probably why - the value being returned is the outer width of the browser window. Source
There is not enough of background to tell you what exactly happens in your browser.
I wrote the following page to test everything out:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
html { background:blue; }
#media screen and (max-width: 980px) {
html { background:red; }
}
</style>
</head>
<body>test</body>
</html>
And after testing it with the inspector, $(window).width() inside of the Chromium inspector shows exactly what it should be.
While screen is red, following style is set in inspector:
margin-left: 8px;
margin-right: 8px;
width: 964px;
...and jquery in console shows:
> $(window).width()
980
Total width is the width + all the margins. So, it is: 964 + 8 + 8 = 980.
In my opinion, this inconsistency is caused by margins and possibly borders set for tags you are measuring and any parent tags. I don't see any other reasons of this behaviour.
I hope this helps.
I figured out the problem.
In chrome, i pressed CTRL MINUS a few times so the window scaled in a way to have smaller text. Once this is done, jquery wil report a different window width from what css report