keep layout as it is, but shrink it on mobile - javascript

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.

Related

How to detect mobile notch?

I have a web app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.
I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.
Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?
HTML::
meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"
CSS::
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

Make MetroJS responsive

I'm using MetroJS (http://www.drewgreenwell.com/projects/metrojs) and its working well.
But now I want to make the Metro layout responsive for mobile devices and so on.
Normally I would say I rearrange the tiles with the #media tag. But since the property about the tile size is in the class tag its not working that way or?
<div class="tiles tile-group five-tall six-wide">
Furthermore it would be awesome to make a animation while resizing the window like in the example:
http://themeforest.net/item/matrix-responsive-tilebased-template/full_screen_preview/2761654
Does anyone have an idea?
If you're looking to create different sizes for your tiles at different screen sizes you can use the theme generator to do this. Just click 'add' under the Size Options and it will create a new media query for you
http://www.drewgreenwell.com/projects/metrojs/theme-generator
.live-tile can be sized to whatever you would like to implement you own responsive. I started a responsive version of the tile layouts but have not had time to finalize it or test enough to include it in a release.
http://www.drewgreenwell.com/scripts/metrojs/src/css/responsive.css
As I move towards GSAP, I plan to build responsive in from the start rather than adaptive.
If you want animated movement of tiles as you resize your browser window (nice, but useful?), then I would recommend using something like Isotope or Masonry for your layout.
Isotope http://isotope.metafizzy.co/
Masonry http://masonry.desandro.com/
Probably worth noting that the theme you linked is using Metro JS (LiveTile) with Masonry for the layout

ASP.net 3.5 converting existing website to responsive design

i have got an existing website developed using asp.net 3.5. business requirement is such that it needs be accessed through mobile devices mainly and mostly tablets.
is there any way i can achieve that without converting the entire website to mvc4 or re writing the front end code?
Try setting the viewport meta tag to at least scale the site on mobile devices, like so:
<meta name="viewport" content="width=device-width, initial-scale=1">
But really, its impossible to make a site fully responsive and mobile friendly without changing the front-end.
Bootstrap's grid system is a quick and fairly easy way to get started with a responsive design. It is a 12-column fluid grid layout that stacks or expands as the screen size or device width changes, and comes with 4 preset widths to help you distinguish among mobile devices, tablets and desktops. You will have to restructure the front end to fit into the grid template, but this shouldn't require a total re-write.
Check out the docs and examples here: http://getbootstrap.com/css/#grid

Is there a way to make page layout fit perfectly at 100% zoom but also respect greater zoom factors?

There are several ways to layout web pages so they fit the browser viewport (DOM window). When I say "fit" I include changing the size of the fonts used and changing the width and perhaps heights of DIVs, IMGs, and other rendered elements, as well as allowing "fluid" movements of elements. The goal is to make the page look "nice" on all display devices, from tiny phones to big desktop screens. These layout ways include using CSS em and % sizes, wrapping of text and elements, and JavaScript run by the onload and onresize events. Layout fitting can be made to work almost perfectly, cross-browser, but a sophisticated result may be insensitive to browser zooming, since zooming changes the window width magically, which means without any browser-independent, reliable way to detect the zoom (DOM and CSS standards ignore browser zooming). There is no way to detect the difference between a small window width due to a small device screen versus a small window width due to a large zoom factor. We want to handle these two cases differently, since vision-impaired users need the zoom factor to be honored.
Has anyone succeeded in fitting layout really well (including changing font sizes) in a way that respects zooming? For example, if the user visits the page with a zoom of 200%, initially only the upper left quarter of the page should be shown (the rest being available by scrolling horizontally and vertically), while the same page would fit into the window perfectly for another user having their zoom set to 100%.
Indeed to have a fluid layout you will have to use % to determine the width instead of pixels.
And for fitting the screen use 100%
Just add the following metatag
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=0">

How would I make a site non responsive?

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.

Categories