I'm currently working on a responsive style sheet which is live at the moment but looks horrendous on non desktop dvices as it is a work in progress.
Is it possible to use some JavaScript to force the desktop layout to load on every device regardless of viewport size?
add this to your head
<meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
Be sure to change the SITE_MIN_WIDTH with your min width of the site. this should force the device to load in to proper sizing.
It sounds like you want to disable some of your media queries with JavaScript.
As far as I know, no, you can’t do this.
You could do the following, although it’s very roundabout:
Add a class to the <html> tag, e.g.responsive
Prefix all the CSS blocks that aren’t currently working as you want with that class, so that they only apply when the class is present.
On page load, use JavaScript to remove that class from the <html> tag.
But then, presumably, you’d need a way to turn them back on when checking them on the devices you’re coding for. Otherwise why have them on your live site in the first place?
Media Queries simply call different CSS files based on the current resolution.
If it is mobile first responsive it starts with the lower sized screen and builds up. Editing your CSS and removing any CSS that affects screens smaller than desktop should do the trick. However, not sure in what system you are using that the site is already built and you need to disable. Their could be hundreds of ways to do this. I do not know what OP is but I would suggest editing your CSS files. You should be able to find what CSS is being loaded by using Firebug on Firefox.
Related
I'm trying to build a quiz following this tutorial : https://www.sitepoint.com/simple-javascript-quiz/
I didn't touch much to the logic and added bootstrap integration (+ meta viewport tag). FYI, I tried without theses changes and my issue is still there.
The quiz is quite straight-forward but I'm struggling making it work on mobile devices. The problem is that I'm not sure to understand the real origin of the issue and therefore, I have a hard time describing it precisely.
In that tutorial, the question and its answers are generated by javascript while the navigation/submit buttons below them aren't, meaning that I have to set a minimum height for the container in which the questions/answers will be generated. Without that, the buttons are displayed prior to the js-generated code and the buttons will be display on top of the question/answers container. Quite logical :
<div class="quiz-container">
<div id="quiz">JS generated Questions and Anwsers go here</div>
</div>
<button id="previous"><<</button>
<button id="next">>></button>
<button id="submit">Submit</button>
<button id="reset">Reset</button>
<span id="results"></span>
It works fine on desktop but not so much on mobile : https://i.imgur.com/buu2PBJ.png
The answers and questions are overlapping making the quiz unusable, especially since I'm adding the good answers on submit to their radio element, generating even more overlapping.
I tried to set another min-height on mobile in CSS, I tried using the "vh" units, I tried playing around with margin/padding but no matter what I do, it will always look like that on mobile. Actually, changing margins or padding around the buttons area will have an effect on the desktop view but none on mobile. The elements will always overlap the same way.
I'm fairly sure it's some logic in the structure of the page on mobile that I don't understand but I really can't put my finger on it despite my many researches and attempts.
Do you have any idea ?
Firstly, use percents and vw for measuring units.
Secondly, use box-sizing property in css and set it to border-box.
And the last, read more about #media here and here. This piece of code is very important :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
So, i've been struggeling with getting my website to work on phones, i'm using a grid, but once i'm trying to view it on a phone it looks awful.
I just want to scale down the desktop-version to half the size on phones.
I've been trying the old zoom:0.5; and transform:scale(0.5); but neither has yeilded me any acceptable result, does anyone know how i can fix this?
I'm using <meta name="viewport" content="width=device-width, initial-scale=1" /> right now, but i've tried without it also.
Here's a link to the website: http://7b772c72.ngrok.io/wordpress/
My grid: https://github.com/joelfolkesson/jf/blob/master/style.css
Shrinking down the content will most likely result in an illegible website on smaller view ports.
You can try media queries for your CSS to give your website the appropriate scale for the sizes defined in said media queries.
If you have not invested too much time I would suggest using Twitter Bootstrap as it already has decent cross device CSS that allow for quick and easy mobile friendly deployments.
You can check out this site that was build with Twitter Bootstrap.
UPDATE:
You want to keep the layout the same as the desktop view for mobile. But as stated above the text will become illegible on mobile view ports and that is in deed the case.
What I would suggest is that you change the CSS media query that governs your menu and logo and increase its size to be readable on the mobile view, instead of using zoom: 0.5;.
Change your logo sizing for the mobile view to about 75% and either change your menu items to 100% width or try using a different defined style for it and either put them in a grid of 3 with 33.3% width and your menu should split into 2 sections above and below or change the grid to 6 with 16.6% width and fit them next to each other and decrease your padding to allow for bigger text.
Other than that I can't help much further as your stylesheet naming conventions are very confusing to me.
I've been working with some basic animations lately and trying to follow good web practices at the same time. The problem I'm encountering is image flicker when not using a preset css method to hide the element before the page loads.
It's very easy to prevent the flicker by just hiding the element with my normal css and then revealing it with javascript, but that seems to me a horrible practice if someone has javascript disabled.
Should I use the HTML5 feature of putting <noscript> tags in the header and then use a separate style sheet to set the opacity and position to the final settings for users without javascript? Is that the most elegant solution?
I've started using the greensock (gsap) library to TweenLite.from, since I can just set everything to the final state in the css, but I get a slight image/text flicker the first time the page is loaded. I like this solution because I can set all of the css as it will be for someone with no javascript, and it allows me to easily animate from a point, to an existing point, instead of working backwards like I have to do with Javascript or jQuery. But, there's still that image flicker which isn't really acceptable. Would a page preloader solve this?
What is the generally agreed upon practice for this these days? I'm also worried about SEO and the consequences of setting stuff to visibility: hidden or display:none and then animating it in. Does the Google spider read javascript?
Here's an example of the screen flicker and animations I'm talking about.
Have a look at HTML5 Boilerplate and Modernizr.
http://html5boilerplate.com/
http://modernizr.com/
It ships with a smart solution to see if a client has JavaScript enabled in CSS.
By default a class no-js is applied to HTML tag and it is then replaced by js by Modernizr. That way you can qualify your CSS selectors accordingly.
Example CSS:
.no-js .foo { }
.js .foo { }
This should execute fast enough that clients with enabled JavaScript don't see the no-js styles.
References:
What is the purpose of the HTML "no-js" class?
https://github.com/Modernizr/Modernizr/blob/master/src/setClasses.js#L9
I was looking around for a way to arrange content differently depending on screen size when I noticed this site. Quite a nice looking site too. As I change my browser's size, the column configuration changes? When I reduce to the very minimum size or visit it on a phone, the large image on top disappears completely, leaving only the small icons. I've turned off javascript, and this still happens. Also, it works in my ie8, so I'm guessing it's not an HTML5 thang. How is it being done?
Thanks!
This effect is not being done by Javascript, instead it is being done by CSS #media queries. Chris Coyier of CSS Tricks has a great intro to #media queries
Simply, it allows you to specify the scope of a stylesheet based on some boolean expression (such as checking if the window width is a specific width used in that example you saw) and then apply specific styles thus making it responsive design
I am working with an iOS magazine framework (PugPig) which loads HTML documents into a WebKit powered view (a chromeless version of Mobile Safari).
I would like each 'page' to load either a portrait or landscape version of an <img/> depending on the orientation of the device. For various reasons it has to be an <img/> rather than a CSS background image, so media queries won't work. Because I am loading HTML from the local device, no web server stuff can be used either.
So I am guessing that JS is the way to go, but it would need to detect orientation change (or at least screen width) on the fly, without a page refresh, and I don't know if this is possible.
Not hugely familiar with JS hence no sample code (all my attempts so far are car crashes). Sorry.
Any help much appreciated.
Did you try jQuery mobile's orientationchange events?
I've never done this, but it seems you could go this way.
OK, found a solution using CSS Media Queries after all, by setting the display property of the img. Bit of a fudge, but fine for now.
Basically I created two divs, one with a 'landscape' id and another with 'portrait', positioned absolutely on top of each other. Then used #media queries to show/hide the relevant div with the display: property. Very clumsy, not at all suitable for the web but okay for an iPad app loading data straight from memory. And this was before "responsive images" became a thing.