Cách lấy kích thước trình duyệt trong code behind?

**quinguyen** · 04-03-2015, 12:53 PM

Web hiển thị: màn hình máy tính, màn hình Tivi, điện thoại, ... trình duyệt web của nó có độ phân giải khác nhau.
Trong Page Load mình viết code lấy dữ liệu từ database lên và bỏ chúng vào thẻ MARQUEE để cho chữ chạy từ dưới lên.

Mã:

var sb = new StringBuilder();
            var dt = bll.DanhSachHienTai_TheoKhuVuc(new KhuVuc(IDKhuVuc));

            sb.Append("<marquee direction=up behavior=scroll scrollamount=2 id='myMarquee' >");
            foreach (DataRow row in dt.Rows)
            {
                sb.Append("<div 
                sb.Append(row[FieldName.TenBanTin].ToString().ToUpper());
                sb.Append("</div>");
                sb.Append(row[FieldName.NoiDung].ToString().ToUpper());
                sb.Append("<hr />");
            }
            sb.Append("</marquee>");

            divNoiDung.InnerHtml = sb.ToString();

Mình set height cho marquee là 500px: hiển thị trên TiVi thì vừa, trên màn hình máy tính thì chỉ chiếm 1 phần màn hình.
(Vì có phần footer nên height marquee mình ko để auto được).

Có cách nào set height marquee trong code behind theo từng loại thiết bị?

Mình có các cách như sau như thất bại:
1. Lấy kích thước màn hình bằng javascript, sau đó trong PageLoad lấy giá trị:

Mã:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript"> 
        function getMarqueeHeight() {
            debugger;
            var height = window.innerHeight || document.documentElement.clientHeight;

            document.getElementById("hiddenHeight").value = height;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentBanTin" runat="server">
    <asp:HiddenField ID="hiddenHeight" runat="server" />
    <div id="divNoiDung" runat="server">
        
    </div>
    <div id="divNote" runat="server"></div>
</asp:Content>

=> Nhưng tiếc là PageLoad chạy trước javascript nên ko lấy được kích thước trình duyệt.

2. set height marquee trong javascript luôn:

Mã:

<script type="text/javascript"> 
        function setMarqueeHeight() {
            debugger;
            var height = window.innerHeight || document.documentElement.clientHeight;

            var marquee = document.getElementById("myMarquee");
            marquee.setAttribute("height", height);
        }
    </script>

=> Không thấy gì xảy ra, nó lấy height marquee được set trong css.

View more random threads:

**quent** · 04-03-2015, 01:32 PM

@nth4 Mình đã đọc lại câu hỏi của bạn nhiều lần, nhưng vẫn chưa thật sự biết bạn đang nói về vấn đề gì.

Thứ nhất: Bạn nói "màn hình Tivi" rồi lại "trình duyệt web của nó"?

Thứ hai: Bạn nói có thứ gì đó nó hiển thị vừa với màn hình Tivi, nhưng không vừa đối với màn hình máy tính. Vậy cho hỏi: Kích thước của cả 2 màn hình đó có bằng nhau không? Nếu khác nhau, vậy chẳng có vấn đề gì xảy ra cả.

Tóm lại: Nếu ý của bạn là "Làm thế nào để 1 trang web tự động resize kích thước của nó cho vừa vặn với trình duyệt yêu cầu load nó trên từng thiết bị?" thì rất đơn giản, set mấy cái margin-top, margin-left... padding-top, padding-left... những thứ liên quan đến kích cỡ được dùng trong CSS và CSS3.

Thiết lập giá trị cho chúng là % (percentage) thay vì giá trị cố định (pixel).

**becute** · 04-03-2015, 02:19 PM

Từ khóa dành cho chủ thớt là "Responsive design".

**cushinthang** · 05-03-2015, 12:07 PM

Gửi bởi villbe

@nth4 Mình đã đọc lại câu hỏi của bạn nhiều lần, nhưng vẫn chưa thật sự biết bạn đang nói về vấn đề gì.

Thứ nhất: Bạn nói "màn hình Tivi" rồi lại "trình duyệt web của nó"?

Thứ hai: Bạn nói có thứ gì đó nó hiển thị vừa với màn hình Tivi, nhưng không vừa đối với màn hình máy tính. Vậy cho hỏi: Kích thước của cả 2 màn hình đó có bằng nhau không? Nếu khác nhau, vậy chẳng có vấn đề gì xảy ra cả.

Tóm lại: Nếu ý của bạn là "Làm thế nào để 1 trang web tự động resize kích thước của nó cho vừa vặn với trình duyệt yêu cầu load nó trên từng thiết bị?" thì rất đơn giản, set mấy cái margin-top, margin-left... padding-top, padding-left... những thứ liên quan đến kích cỡ được dùng trong CSS và CSS3.

Thiết lập giá trị cho chúng là % (percentage) thay vì giá trị cố định (pixel).

Mình dùng smart Tivi để xem web.
1 số smart Tivi hiển thị đúng kích thước mặc định. 1 số smart Tivi có không hiển thị đúng kích thước, do độ phân giản màn hình thấp hơn.
Mình sử dụng Javascript để lấy kích thước của trình duyệt web của Smart Tivi. Trong Page Load mình muốn lấy dữ liệu đó. Nhưng Page Load chạy trc Javascript nên ko thể lấy được kích thước của màn hình.

**53caugiay** · 05-03-2015, 03:56 PM

Thế này nhé: Browser không có kích thước mặc định, và cũng như việc bạn không thể code lấy được giá trị của Browser size.

Kích thước mà bạn đang nhắc tới là chiều cao x rộng (độ phân giải) của màn hình hiển thị, không phải của Browser.
Bạn vẫn chưa nói rõ việc dùng "smart Tivi" để duyệt website của chính bạn viết, hay là đối với tất cả website.

Nếu là website do bạn tự viết thì mình có 1 ví dụ đề xuất nho nhỏ để bạn tham khảo.
Code html:

Mã:

<!DOCTYPE html><html><head><style>div{    width: 80%; /* Dòng này thiết lập độ rộng của div luôn ở mức 80%, bất kể độ phân giải là bao nhiêu */    margin-left: 10%;   /* Dòng này nói rằng div sẽ cách xa lề bên trái 10% */    margin-right: 10%;  /* Dòng này div cách lề phải 10% */    margin-top: 5%; /* Cách lề bên trên 5% kích thước */    margin-bottom: 5%;  /* Cách lề dưới cùng 5% kích thước */     padding-left: 10%;  /* Dòng này thiết lập cách dòng chữ bên trong thẻ div cách lề trái của thẻ div 10% */    padding-right: 10%; /* Chữ trong thẻ div cách lề phải của thẻ div 10% */    padding-top: 3%;    /* Cách lề bên trên 3% */    padding-bottom: 2%; /* Cách lề dưới cùng 2% */}</style></head> <body>    <div>        Hello World!    </div></body></html>

Nguyên tắc hoạt động: Bạn đem tất cả dữ liệu - thứ mà bạn cần resize vào trong thẻ <div>. Bên trên (trong cặp thẻ <head> và <style>) bạn định nghĩa kiểu hiển thị cho thẻ div.
Trong ví dụ trên, dòng chữ "Hello World!" nằm trong cặp thẻ <div> ở phần <body>.
Khi hiển thị, <div> sẽ kiêm các công việc như sau:

1. Độ rộng là 80% của Browser, cách lề trái và lề phải mỗi bên là 10% kích thước.
2. Cách đều lề trên cùng và dưới cùng, mỗi phần là 5% kích thước (chiều cao) của Browser.
3. Dòng chữ "Hello World!" cách xa lề trái + phải của thẻ <div> mỗi bên là 10%. Tức là cách xa lề trái + phải của Browser mỗi bên là 20%.
4. Dòng chữ cách lề bên trên của thẻ <div> là 3%. Tương đương khoảng cách 5% + 3% = 8% so với lề trên của Browser.
5. Tương tự, dòng chữ cách lề dưới của thẻ <div> là 2%.

Ví dụ: Chiều rộng của độ phân giải là 1024, thì 80% tức là 80% của 1024. Nếu là 1366 thì là 80% của 1366. Không cần biết nó là bao nhiêu, bạn vẫn lấy được giá trị chính xác là 80% gốc.

Nếu bạn muốn mỗi 1 thẻ <div> có 1 định dạng kích thước hiển thị khác nhau, thì phải đặt id cho từng thẻ, khi viết trong phần <body>, Browser tự động biết điều chỉnh dựa vào id đó.

Trên là ví dụ cơ bản, mình gắn nó trực tiếp vào trong code HTML, nhưng đối với ASP, bạn nên tách nó ra, viết trong file style.css, rồi add vào trong cặp thẻ <head>