Дэлгэцийн харьцааг алдагдуулахгүйгээр харуулах нь

Хэд хоногийн өмнө ажил дээр хийж байгаа төсөлд маань төхөөрөмжийн дэлгэцийн хэмжээ өөрчлөгдсөн ч үзүүлэнгийн харьцаа алдагдахгүй байх даалгавар тулгарлаа. Энэ ажил вебд суурилсан үзүүлэн (presentation) бэлдэх програм бөгөөд гар утсан дээр мөн ажиллах ёстой. Дэлгэцийн хэмжээ өөрчлөгдсөн ч үзүүлэнгийн хуудсанд байх контентууд энд тэнд орохгүй томорч жижгэрэхгүй байх ёстой.

1. Арга нь pure css буюу цэвэр css ээр шийдэж болох ба гарах асуудал нь эмбэд датанууд‍(embed) дээр тус бүрчлэн css бичих шаардлагатай. Мөн урт өргөн нь хатуугаар заагдсан объектыг (Жишээ нь видео, флаш) харуулахад асуудал тулгарна.

2. Хоёр дахь арга нь zoom буюу scale хийх javascript бичих. Үүнийг хэрэгжүүлэхийн тулд wrapper div объект нь хатуугаар заагдсан байх ёстой. Түүний доторх объектууд нь хатуугаар заагдсан ба дэлгэцийн хэмжээ өөрчлөгдөхөд урт өргөн өөрчлөгдөхгүй бидэнд харагдах хэсэг өөрчлөгдөнө гэсэн үг.

Миний хувьд хоёр дахь аргыг хэрэгжүүлсэн. Хэрэгжүүлэхийн тулд html ийнхээ бүтцийг тэр чигээр нь өөрчлөх шаардлагатай боллоо. Програм хангамжийн архитектур гэдэг үг толгой руу буух нь тэр.

jquery ашиглавал илүү амархан бичигдэх боловч ангулар жаваскрипт ашиглаж байгаа болохоор ямар нэгэн сан ашиглалгүй зөвхөн ангуларын дэлгэц өөрчлөгдөх эвэнтэд бичлээ.

javascript хэсэг

app.directive('resize', ['$window', function($window) {
   return {
    link: function(scope, elem, attrs) {
     scope.onResize = function() {
      var page = document.getElementById('pages');
      var wWidth = $window.innerWidth;
      
      var pWidth = page.offsetWidth;
      var wHeight = $window.innerHeight;
      var pHeight = page.offsetHeight;
      if((pHeight/sHeight)  > (pWidth/sWidth)) 
       var m = sHeight / pHeight;
      else 
       var m = sWidth / pWidth;
   
      var cols = document.getElementsByClassName('page');
       for(i=0; i < cols.length="" angular.element="" bind="" cols="" function="" i="" m="" moz-transform="" pre="" resize="" scale="" scope.onresize="" style.zoom="m;" window="">}
}
     scope.onResize();

     angular.element($window).bind('resize', function() {
      scope.onResize();
     })
    }
   }
  }])

css хэсэг

.wrapper {
   margin: auto;
   width: 960px;
   height: 720px;

  }

Ашиглахдаа