Next.js + Tailwind Website Zoomed In in firefox - javascript

I have developed website using Next.js and Tailwind CSS. The website while testing appears to be zoomed In in Firefox but its looking fine in all other browsers.
When the screen is broguht to 80%, then the website looks fine in firefox. What's the solution to this problem so that the website should appear same in all browser.
Thanks

try to use css reset in the globalStyle.css file.
just copy the reset from the following Link .
that should resolve your problem

CSS Zoom property was used on the product site to set the layout. Avoid using this property as far as you can because firefox does not supports this property.

For anyone still looking for the solution, add the below in your head block. It did the trick for me.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"></meta>

Related

How detect smartphone screen and show webpage

I'm creating a webpage and I want create a version for smartphones.
I found information about this, but using a media-query with max-widht.
The problem is when a user open the page in a smartphone with full HD screen, it's showing all content like in notebook with 15.6"
How can i solve this?
Thanks
Take a look at HTML Responsive Web Design at w3schools: https://www.w3schools.com/html/html_responsive.asp
What you need is to make viewport responsive by adding meta viewport tag to your pages head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I agree with #StaXter. But IF you can, I'd implement a feature both back end and front end solution. From what I've read online, the back end solution may fail sometimes, and as every web developer knows, JS sometimes fails too, for whatever reason although JS failing is becoming less common in my personal opinion.
But if you can't then there's 0 doubt, just use the solution that StaXter said.
Only other thing I can add to that where you're just using the front end is to make sure you use meta tags: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
There are even meta tags for when someone has disabled JS, you can redirect them to a page where there's no JS.

Android browser rendering half width of html text

I have already disabled the CSS, deleted half of the HTML code, it looks like it is a bug with the Android browser. I'm using Android 4.2.2, built-in browser.
How it should render:
Text 1234567891011
How it is actually rendering:
Text 1234
567891011
I have double checked the page code and the CSS, disabled Javascript and CSS, and still get the same results. I'm not sure if it is a browser issue or a code issue.
Page to check: http://lucrebem.com.br/blog/emp/66-o-que-vender
Screenshots, as requested:
So far I have found this:
Those images are from a tutorial using Android 4.1.2, which means those older versions of Android have that issue with auto-fitting the pages. Isn't there a way to configure the code itself to fit the page, instead of having to change Android settings?
Solved.
Had to insert this in the HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What it does is controlling the viewport layout in mobile, this way the page can fit to screen without having to change Android settings.
As stated here:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Image Loading on Mobile CSS/HTML

I have been editing a web page, some CSS/HTML (didn't start to code from the beginning just edit)
My website works with all browsers right now, the problem is half of the images does not upload on mobile. I have put a screenshot.
Here is my code http://jsfiddle.net/2gj9b2ub/
I've been reding these media queries but it seems I have to re-write the all CSS for that? The site is not a mess just image uploading problem so maybe I can fix with something else.
Thanks for the help.
So I found a solution after few research,
I just entered this one line of code <meta name="viewport" content="width=device-width, initial-scale=0.33, maximum-scale=1" /> into head section, adjusted scale and it worked. It doesn't work as good as like bootstrap or a code for designed for mobile, but it fixed.
Thanks for help.

How to stop page scrolling while....still allowing scrolling?

I'm making a mobile app with PhoneGap. I've got this--
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove",preventBehavior, false);
You know how you can drag a page a tiny ways off of the smartphone screen by dragging it, and then it pops right back when you release it? And all you see behind it is black? That's what this code is meant to prevent. And it does.
But it's also preventing all standard scrolling, such as scrolling through a list. Does anyone know a solution?
An easy solution for Cordova 1.7+
Locate Cordova.plist in your Xcode project.
At the top it will say “UIWebViewBounce“. Set this to NO.
you have two options:
iScroll - Super effective in giving this effect. Granted it does have it's limitations.
-webkit-overflow-scrolling:touch; a new css method introduced in ios 5 it works well but again has it's limitations within phonegap.
Personally I use iScroll for phonegap apps, it works great if you don't have a super large list of items you are scrolling. If you're looking for a more native way I would suggest the overflow-scrolling method, this has proven to cause some strange effects in the webview. Phonegap uses webview vs mobile safari so your support differs a bit.
iScroll - http://cubiq.org/iscroll-4
webkit-scrolling - http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
You should add this in your head tag: (No need of your listener code now)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
This basically disables the scaling (zoom in/out) and that drag effect which you do not want. So the page will not be scrolled but still touchmove event can be tracked.

Any script to make IE show CSS3 / HTML5 same as Firefox / Chrome?

I designed a HTML Webpage, and everything look perfect on Chrome and Firefox.
But on IE9, its show very bad >_<
I wonder, do we have any script or some ways to auto set / fix those thing for IE?
you should include the HTML 5 Doctype. When i loaded the page in IE9, it was forcing the page to Quirks mode. looks mostly ok when I change it to IE9 standards mode.
<!DOCTYPE html>
Also, you could try using the meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" >
or
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
to force the browser mode to IE9.
I got two, two word phrases for you bro... 'Progressive Enhancement' and 'Graceful Degradation'
Please validate your page first. No proper doctype deceleration. Browser will render your page in QuirksMode. I think some tags also missing.
I don't know any script to do so... But your problem may depend on what properties are you using and if they are supported by IE9. You may want to check W3C site for CSS properties support
It depends on what feature you use. For example if you use a progressbar you can emulate one with javascript. Alternatives are also called polyfill. A good link to use could be the html5 please website
you may want to consider using these:
http://html5doctor.com/html-5-reset-stylesheet/
and:
http://modernizr.com/

Categories