How to show website the same way on phone like on PC - web

Is there any way to show my website exactly the same way how it works on PC, tablets or notebook? I've got full HD laptop and i'm using Chrome - everything works great. On my tablet 10" I also have full HD resolution and Chrome and my website shows like this one on notebook. When I try to to show it on my full HD Lumia 1520 it's crap. I don't use Chrome here so I can understand that some element can be broken by interpreter but it's so approximate that every element go on the others. It looks like 640x480.
Is it some way to force approximate?

If the site developed is not responsive according to the screen size it will not display the content present on it in well manner, you must use bootstrap in your website to make it responsive for all kind of screen resolutions. It may has problem in the CSS. So check the css you used.

Try to use meta tag called view-port. There are different situations and you may set up your website appearance with media queries for responsive results or manage it for being non-responsive but comfortable.
If you need second result - don't use any responsive frameworks or prevent them of using responsive techniques.
There are to much different situations so I can help only if you'll show me the code you have.

Related

Displaying a Classification Banner at the top of each computer monitor in Gnome Desktop

I work in an environment where we have to have a security classification banner displayed at the top of each monitor on our Gnome Desktops. Currently, I am using a Perl/Tk window to display the classification of the system. However, that window cannot be moved because of the way it is built (no decorations) and occasionally overlays open windows making it difficult for users to manage those windows.
I would like to be able to do something different, but I'm not sure where to start. Three ideas I have are this:
An icon or something in the Top Bar showing the classification
A banner, like the Top Bar, that sits above the Top Bar
A window, like I already have, but relocatable
I figure the first option would be easiest, but since the Top Bar isn't shown on every monitor, that may not be the best option. I don't even know if the second option is even possible. The third option would require me to use something other than Perl/Tk but that's the only language I'm fluent in at the moment.
So I'm looking for suggestions or examples or Gnome extensions I can use to solve this problem.
Thanks.
There is a classification-banner python utility at https://github.com/fcaviggia/classification-banner. It's no longer maintained, but we've been using it without change for a few years now. It's OK. One problem is that it doesn't "shrink" the desktop screen, so application windows can overlap it; it's set to Always On Top, but it would be nicer if it actually couldn't be overlaid at all.
A simple solution, of sorts, would be to change the desktop background image. This can have issues if you're displaying on multiple resolutions (I don't know if Gnome supports SVG for such purposes) and of course it can be obscured by windows covering it.
Older versions of Gnome let you create multiple bars that worked perfectly, but that disappeared - along with many other customizations - in Gnome 3.

What do internet browsers use for rendering?

very quick one, I was always wondering, do internet browsers use for rendering OS API functions to create buttons, render mages and so, or do they render it all on their own?
I first thoght that it uses system api, but there are some effects like when screen fades into grey and you see only small window in the middle, you know, thet effect used on many picture albums online, which I dont really how to achive using for example only Win32 calls.
EDIT: To be more exact, I know that final drawing on screen will always use system API, but you can send prerendered image as you want to it. Thanks.
Web browsers use their own rendering engines rather than OS API. Using OS API to render buttons totally depends on the design decision of a particular rendering engine. However, to run on various operating systems these engines prefer their own rendering to offer same look-n-feel across platforms.
Gecko, for Firefox
Trident, for Internet Explorer
Presto, for Opera
KHTML, for Konqueror
WebKit, for Apple's Safari and Google's Chrome web browsers.
Ref: http://en.wikipedia.org/wiki/Web_browser_engine
Do browser rendering engines useOs api for creating buttons, writing text, creating boxes, etc., or do they render all of this on their own using OS API just for actually show the rendered image on the screen?
I implemented something of a browser rendering engine (see e.g. Table of Supported Elements and Supported Properties for a list of the HTML elements and CSS properties that it supports).
I use system APIs (.NET Framework APIs, which are thin wrappers around underlying O/S GDI APIs) to:
Measure words (strings of text)
Paint words
Draw lines and boxes
Fill rectangles with solid color
These are the kind of API functionality that's implemented by the Windows GDI.
There are also some system (O/S or .NET) APIs that I use, to draw buttons and combo boxes (see Rewrite standard controls like edit, combo, etc?).
Becouse, the whole rendering of text, graphics and so seems pretty hard to write completely yourself
Yes, implementing CSS and everything does take a while. You've seen how long it took the browser developer teams to implement: several calendar years, many person-years.

Text based site for mobile phones?

I tested my site on a mobile device and it loaded pretty quickly. However i had to scroll right to see all of the text. The text was pretty big as well.
How can i redesign my site so i dont need to do any scrolling and have smaller text? I know i I seen this before but i cant remember what site did it.
i removed my css and the device scrolled right until the end of my largest div. So i need css to solve this? What css do i need to make the text not big and not cause the user to scroll (horz) no matter how small his screen is?
Also do i detect the user agent in .NET and link an alternative css file or do i detect which css to use elsewhere?
yes you should design an own css-file for the mobile version of your website. either you check the useragent if it's a handheld or you work with the css media type handheld (which is not supported by older browsers) to load the different css-file.
edit:
with css you can also replace images with text

Opening a new browser page on the second monitor

Well, simple situation. Is it possible to detect if a user has a dual monitor setup from a web application?
If this is possible, is it possible to open a child browser page on this second monitor, so the new window doesn't overlap the old one?
Reason why I ask: I'm working on a web application and at home I have a dual-monitor system. When I go to the administration part of this site, I want it to open in a new browser, preferably on the other desktop. Of course, I could just click, then drag the new window, but doing this automatically seems more fun. :-)
Don't think JavaScript has the proper functions for this. How about Java itself?
I don't think you'll be able to directly detect a dual monitor setup, but you can probably make a good guess by looking at their screen resolution, using javascript's screen.width and screen.height. If the ratio of the width to the height is 8:3, its a good chance they have 2 standard 4:3 monitors side by side. You can do a similar calculation for 16:9 or 16:10.
Using maxpower47's suggestion about resolution, the only way to display the page on the other monitor would be to open a popup, and use the options to set the top, right, width and height properties so the window will appear on the second monitor in a decent size.
Here is a link that describes how to do this: http://www.netmechanic.com/news/vol4/javascript_no7.htm

Working arround font rendering issues in all major browsers

Since long time i been having a real problem with the different ways that each browser display text.
Sure you have noticed that even when you create a stylesheet specifying everything about the font properties, still every browser display the same text with some differences, the usual problem is the font weight, that even if you specify it different browsers display it different ways.
I would like to know if some as come with a solution. Not turning the text into a image.
Thanks.
EDIT:
This is a example of the problem. On the left Firefox and right IE. However i have defined in the CSS font family, weight, size and still they render the fonts different.
Snapshot
Do you mean that on one browser its bold and another one its normal? A reset should fix that, but if it doesn't, it might be something overriding that.
If you're talking about fonts looking different, it is possible - for example, since Google Chrome / Chromium sandboxes the renderer process, the font rendering won't be affected by other parts of the system, and I believe that it uses some sort of special font rendering. To be honest, on my Linux install, I do get bolder fonts on Chromium, but Firefox displays them fine.
There's SIFR (as pointed above), but it needs Flash and it is a bit heavy. There's also Cufon http://cufon.shoqolate.com/ that uses Javascript. Could you show a screencast so we know what's the problem? Thanks.
SIFR is a good solution, as long as you're only trying to control the appearance of small chunks of text (headings, design elements, etc.)
Beyond that, browsers are perfectly allowed to render text any way they want, and getting it pixel-perfect between browsers and operating systems is usually not even desirable for larger chunks of text. Users will have different accessibility settings and anti-aliasing settings which are tuned to the way they want to read text, and in general websites should try to respect that.
You can use SIFR.
Although this problem is already about a week old, here is a solution that I found, that might be related:
http://blog.wolffmyren.com/2009/05/28/jquery-fadeinfadeout-ie-cleartype-glitch/
If you're not using jQuery, try removing the filter attribute from the elements that are displaying non-Cleartype'd text and it should work, according to that blog post.

Resources